我如何获得一个div从上面的div伸展到它下面的div？

这里是我的工作with 我如何获得一个div从上面的div伸展到它下面的div？

代码：

header { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 60px !important; 
 
} 
 
.content { 
 
    margin-top: 60px; 
 
    background: pink; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 
footer { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 30px; 
 
}

<header> 
 
    header 
 
</header> 
 
<div class="content"> 
 
    content-main 
 
    <br /> 
 

 
</div> 
 
<footer> 
 
    footer 
 
</footer>

我想粉色位延伸到顶部和底部。我不在乎滚动条是用于粉色内容div还是body div。我只需要我填写整个页面并在溢出时滚动。

我有一个额外的限制是，如果页脚被动态删除，我希望粉红色的内容仍填充所有空白空间。

来源

2017-02-15 Chris Chevalier

相反的%，使用vh设置你的容器最小高度，以占满整个页面

.content { 
    margin-top: 60px; 
    background: pink; 
    min-height: calc(100vh - 90px); /* 100% the height of the screen minus header and footer */ 
    width: 100%; 
}

这里举例：http://jsfiddle.net/Digedu/5n1azfyn/

来源

2017-02-15 17:10:18 Digedu

废我的答案，去与@dippas – Digedu

，使用此设置.content：

MIN-身高：calc（100vh - 90px）;

（这是整个窗口高度减去页眉和页脚的高度）

来源

2017-02-15 17:11:03 Johannes

使用VH或定身至100％的高度 –

一个额外的约束我是，我想粉色内容仍然填补所有空白空间，如果页脚是动态除去。

使用flexbox为，

添加新的元素来包装别人，你可以设置为包裹和display:flex; flex-direction:column给flex:1到.content。

注：您需要height:100%在html,body和包装元素，以便在这种情况下flex:1工作。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100% 
 
} 
 
header, 
 
footer { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
} 
 
.content { 
 
    margin-top: 60px; 
 
    background: pink; 
 
    flex: 1; 
 
} 
 
header { 
 
    top: 0; 
 
    height: 60px 
 
} 
 
footer { 
 
    bottom: 0; 
 
    height: 30px; 
 
}

<section> 
 
    <header> 
 
    header 
 
    </header> 
 
    <div class="content"> 
 
    content-main 
 
    </div> 
 
    <footer> 
 
    footer 
 
    </footer> 
 
</section>

来源

2017-02-15 17:11:39 dippas

我如何获得一个div从上面的div伸展到它下面的div？

回答

相关问题