我所拥有的是一个简单的结构container
接下来是两个子元素,content
and footer
.
footer
有固定的高度并且content
应填充剩余的空白空间。这很容易实现display:table;
但由于某种原因我不知道如何制作content
如果元素内容超过网站窗口高度,元素溢出会起作用吗?
这里有一个JSFiddle https://jsfiddle.net/xyxj02ge/3/,如果你设置content_child
身高要说10px
你可以看到content
元素很好地填充了空间,但是当content_child
是大很多content
元素不应该像现在这样扩展,我在这里缺少什么?
如果可能的话,我宁愿不使用 JavaScript 来解决这个问题。
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: hidden;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
Flexbox 可以做到这一点。
body {
margin:0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #bada55;
overflow-y: auto;
}
.expander {
height: 1000px;
/* for demo purposes */
}
footer {
background: red;
height: 60px;
}
<div class="container">
<div class="content">
<div class="expander"></div>
</div>
<footer></footer>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)