html - 如何让div自动适应窗口的高度

Question

我在根据浏览器的大小拉伸(stretch)和收缩 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。

谁能帮帮我？

Answer 1

使用viewport width/height 设置元素尺寸relative window

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>