Question

我试图在页眉和页脚之间创建一个调整整页高度的div。我不希望页面上有任何滚动，我环顾四周，无法找到适合我的解决方案。

这是我的网页图片。

无论浏览器的缩放比例如何，我都希望黑色边框能够一直向下扩展到绘制的红线。显然宽度已经有效，但我不能为我的生活获得高度。

这是我的代码：

<div class="row" style="height:100%;">
    <div class="col-md-2" style="border:1px solid black;">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Links</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="col-md-10" style="border:1px solid black">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Viewer</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

Answer 1

您必须将html和body的高度设置为100％，然后才能设置孩子的身高。我建议不要在.row类上设置100％，因为这是Bootstrap，所以也许自己上课。然后你也需要你的列高度为100％。

html, body { height:100% }
.row-wrapper { height:100% }
.row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%}    

...

<div class="row row-wrapper">

请记住，css规则.row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%}不是很灵活，所以我建议创建另一个类来定位它们。

Answer 2

Flexbox（不幸的是，不是Bootstrap 3的一部分）或vh单位是两个选项。

.row-wrapper {height: 100vh;}

http://caniuse.com/#feat=viewport-units

Answer 3

为父div设置相对位置，为子div设置绝对值，它将适用于高度和宽度。

子div根据分辨率大小从父级获取尺寸

#divParent {
  background-color: #0D0201;
  height: 280px;
  position: relative;
}
#divChild {
  background-color: #F20914;
  height: 100%;
  position: absolute;
  width: 100%;
}
@media screen and (min-width: 480px) {
  #divParent {
    height: 380px;
    background-color: #524D4C;
  }
  #divChild {
    background-color: #FF333C;
  }
}
@media screen and (min-width: 680px) {
  #divParent {
    height: 480px;
    background-color: #827F7E;
  }
  #divChild {
    background-color: #F19189;
  }
}
@media screen and (min-width: 980px) {
  #divParent {
    height: 600px;
    background-color: #CFCDCC;
  }
  #divChild {
    background-color: #F7C7C3;
  }
}

<body id="divParent">
  <div id="divChild" class="row">
    <div class="col-md-2" style="border:1px solid black;">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Links</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>
    <div class="col-md-10" style="border:1px solid black">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Viewer</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>
  </div>
</body>

如何将元素的大小调整为完全可见的高度

3 个答案: