Question

根据浏览器的大小，我在进行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将元素尺寸相对设置为窗口

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我猜你正在谈论的空白空间是左右两侧的灰色元素。这些是由身体上的默认边距引起的。只需将身体边距设置为零。

body { margin: 0; }

在您的问题中使用您的标记，它似乎按照我认为您的要求运作。

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

2 个答案: