我想使用 CSS 调整 div 的高度。我希望内容 div 的高度至少为 420px，但如果在更大的屏幕上查看它并且有额外的空间，我希望 div 的高度增加但最大为 790px。我真的不知道该怎么做。
#container {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:#F0F;
}
#container #menuBar {
background-color:#03C;
height:100px;
}
#container #content {
min-height:420px;
max-height:790px;
background-color:#F00;
}
#container #clock {
background-color:#0C0;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<div id="menuBar">menubar
</div>
<div id="content">content
</div>
<div id="clock">clock
</div>
</div>
</body>
</html>
最佳答案
Flexbox 可以做到这一点……但我不确定您的用例。在我看来你可能有溢出问题。
但是:
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #F0F;
display: flex;
flex-direction: column;
}
#container #menuBar {
background-color: #03C;
height: 100px;
}
#container #content {
flex: 1 0 120px;
/* your min-height as flex-basis */
max-height: 400px;
/* your max-height */
background-color: #F00;
}
#container #clock {
background-color: #0C0;
}<div id="container">
<div id="menuBar">menubar
</div>
<div id="content">content
</div>
<div id="clock">clock
</div>
</div>关于html - 使用 CSS 动态调整最小和最大尺寸之间的 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35490281/