如何使 div 自动适应窗口的高度答案

【问题标题】：How to make divs auto fit themselves to the height of the window如何使 div 自动适应窗口的高度
【发布时间】：2016-05-09 09:29:14
【问题描述】：

我在根据浏览器的大小进行 div 拉伸和收缩时遇到问题。

这里是html

<div class="content_container">
    <div class="content_menu"></div>
    <div class="content_left"></div>
    <div class="content"></div>
</div>


.content_container{
    margin: 0 auto;
    height:100vh;
    display:block;  
}
.content_left{
    background: #eee none repeat scroll 0 0;
    display: inline-block;
    float: right;
    padding-top: 50px;
    position: relative;
    text-align: center;
    width: 25%;
    height:calc(100vh - 50px);
}
.content_menu{
    background: #eee none repeat scroll 0 0;
    float: left;
    height: 100px;
    width: 25%;
    height:100vh;
}
.content{
    background: #fff none repeat scroll 0 0;
    display: inline-block;
    margin-bottom: 0 !important;
    margin-right: auto !important;
    vertical-align: top;
    width: 50%;
}

我已经尝试过提供height:auto、100% 和 100vh，但似乎都不起作用。

.content_left 和 .content_menu 低于 .content 的高度，因此存在空白。

这些图层是否可以自行调整大小以适应高度以及.content div。

谁能帮帮我？

【问题讨论】：

所以基本上你是说你想摆脱垂直滚动条并让 div 始终适合视口的大小？
嗯，@Michael_B 不是真的。我不是这个意思。没有办法摆脱我给你的网站上的垂直滚动条，因为内容可能超过 100% 大小。我只想让 .content_left 和 .content_menu 拉伸它们的高度以适应浏览器的高度。
没有访问您的网站。我正在处理您问题中的代码，这应该可以重现问题。使用body { margin: 0; } 可以消除垂直滚动条。

标签： html css

【解决方案1】：

使用viewport width/height 设置元素尺寸相对到窗口

body {
  padding: 0; margin: 0;
  width: 100%;
  width: 100vw;
}
div {
  background: lightblue;
  height: 45px;
  margin-top: 20px;
}
#two {
  width: 100%;
  width: 100vw;
}
#one {
  width: 60%;
  width: 60vw;
}

<div id="one">div one</div>
<div id="two">div two</div>

【讨论】：

【解决方案2】：

我猜您所说的空白区域是围绕左侧和右侧灰色元素的区域。这些是由主体上的默认边距引起的。只需将正文边距设置为零即可。

body { margin: 0; }

在您的问题中使用您的标记，它似乎可以按我认为的那样工作。

【讨论】：