我有两个div垂直堆叠在一个容器div中。容器div有height: 100%
,底部内部div有动态高度。我希望顶部的div占据容器的剩余空间,这样底部的div就可以有效地固定在视口的底部。
<div class="container" style="height: 100%">
<div class="my-height-should-be-the-remainder-of-the-container" style="overflow: scroll">
<p>My content should scroll if I become too small to show all of it</p>
</div>
<div class="my-height-should-take-priority-over-the-top-div">
<p>My height should dynamically change depending on my content</p>
<p>As a result, my content should never overflow</p>
</div>
</div>
我尝试过使用display: table
和内部div作为display: table-row
,但无法获得顶部div来尊重overflow: scroll
;它只是将底部的div推到视口之外。
我知道我可以在底部div上使用position: fixed
,然后使用javascript动态更改顶部div的padding-bottom
,但我很想找到一个只使用CSS的解决方案,最好是没有flexbox的解决方案。
谢谢!
如果在要滚动的内容周围使用一个绝对定位的div,它在布局中不会占用空间,因此其他内容将在基于表的布局中胜出。然后,如果需要的话,您可以在绝对定位div的包装器上使用overflow:auto
示例:
body, html{
margin:0;
padding:0;
}
div{
box-sizing:border-box;
}
.container{
height:100vh;
width:100vw;
display:table;
border-collapse:collapse;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
height:100%;
}
.header{
height:100%;
border:1px solid green;
}
.wrapper{
height:100%;
position:relative;
overflow:auto;
min-height:45px;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.footer{
border:1px solid blue;
}
<div class="container">
<div class="tr header">
<div class='td'>
<div class="wrapper">
<div class="content">
<p>My content should scroll if I become too small to show all of it</p>
<p>My content should scroll if I become too small to show all of it</p>
<p>My content should scroll if I become too small to show all of it</p>
<p>My content should scroll if I become too small to show all of it</p>
</div>
</div>
</div>
</div>
<div class="tr footer">
<p>My height should dynamically change depending on my content</p>
<p>As a result, my content should never overflow</p>
<p>My height should dynamically change depending on my content</p>
<p>As a result, my content should never overflow</p>
<p>My height should dynamically change depending on my content</p>
<p>As a result, my content should never overflow</p>
</div>
</div>
Fiddle:https://jsfiddle.net/trex005/j7m3yLp7/1/
更多详细信息:https://blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css-ie8-firefox-chrome-safari/
你说最好不要基于flexbox,但如果你取消限制,情况会是这样的:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex;
flex-flow: column nowrap;
height: 100%;
}
#top {
background: lightblue;
flex: 1;
overflow: auto;
}
#bottom {
background: lightgreen;
}
<div id="container">
<div id="top">
This is the top.
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="bottom">
This is the bottom
</div>
</div>
不确定这是否是您所需要的。最大时顶部div将为200px高
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.top {
height: 20%;
background-color: red;
max-height: 200px;
}
.bottom {
background-color: green;
height: 80%;
}
</style>
</head>
<body>
<div class="container" style="height: 100%;background-color: yellow;">
<div class="top" style="overflow: scroll;">
<p>My content should scroll if I become too small to show all of it</p>
</div>
<div class="bottom">
<p>My height should dynamically change depending on my content</p>
<p>As a result, my content should never overflow</p>
</div>
</div>
</body>
</html>