Question

我有一个div.row2，我试图使整个页面适合它并且它无法正常工作。

我有一个容器流体，它是整个站点的容器。在那里有一个容器，用于保持某个部分到位。

以下是HTML中的整体结构：

<div class="container-fluid">
<div class="navbar-static-top">
<div class="container"> <!-- this container is only meant to apply to the navbar-->

这至关重要：

任何缩放到全宽。
然而，尝试在页面下方的div处包装容器不起作用。事实上，它使div变得更加狭窄。
在容器中进一步包含此div另一方面，页面确实可以正常工作（就宽度而言），但会导致div被推到页面上方而不是我想要的它定位。
我设法让header达到最大宽度的方法是将其归类为navbar-static-top。但当我看到它的css时，似乎没有任何东西可以达到我的row2的相同效果。

所有相关的HTML：

  <div class="container-fluid">
<div class="navbar-static-top">
    <div class="container">
      <ul class="nav-justified">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
    </div>
</div>
<div class="col-md-12 alpha">
  <div class="headline1">
  <div class="col-md-4 alpha">
   <h1>....<h1><br>
 <p class="arial">....</p>
</div>
<div class="col-md-4 beta">
<img src='images/appleproducts/appleproducts.png'/>
</div>
</div>

<h1 class="hblack">...</h1><br>
<div class="row" style="text-align: center">
<p class="narrow">Lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem lorem ipsem </p>
 <div class="col-md-4">
 <img src="images/icons/iphone26.svg" alt="" style="width: 30%; height: 30%; color: #CC6699;">
</div>
<div class="col-md-4">
<img src="images/icons/iphone26.svg" alt="" style="width: 30%; height: 30%;"></div>
<div class="col-md-4">
<img src="images/icons/iphone26.svg" alt="" style="width: 30%; height: 30%;">
</div>

</div>

<div class="row2" style="text-align: center;">

 <!--this is the offending div-->
</div>
</div>

CSS：

html {
font-family: Impact;
-webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
 padding: 0;
 }
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-image: url(../images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.container-fluid {
padding-right: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
height: 100%;
}

.col-md-12 {
width: 100%;
margin: 0%;
margin: 0 auto;
}

.row2 {  
background-color: #CC6699;
height: 22%;
width: 100%;
z-index: 1000;
margin: 0;
padding: 0;
border-radius: 0;
}

只需注意几点：

我相当肯定我在这里尝试了所有明显的技巧：将row2改为不同的东西（即col-md-12），给第2行container-fluid，确保除了row2之外没有任何事情包裹container-fluid，从基本上所有内容中取出填充物，从事物中取出边缘。是的，这包括正文和HTML。在bootstrap.css上有一些东西浮出水面，确实希望保持div宽度小于100％，但我无法弄清楚它是什么。
非常奇怪的是，它几乎肯定不会在包含div的内容中填充。我已将body，html，container-fluid，col-md-12和container的填充设置为0。
- 我也尽可能地将所有宽度都设为100％。

Answer 1

尝试：

body, html { height: 100vh; width: 100vw; overflow: hidden; }

vw和vh（viewport width and viewport height）是测量单位，代表视口的1 = 1％。因此100vw表示视口100%，100vh表示视口高度100%。当您使用100%时，表示该元素为父的100%（即包含元素或包含相关元素的元素）。现在，body的直接后代（子项）的所有元素实际上都是视口的100%。

Bootstrap div在容器中不会达到100％的大小

1 个答案: