我正在尝试制作一个应该是简单的响应式页面,它由几个 div 组成,如下所示:
<div id="container"> maximum 1200 width and 1000 height
<div id="vertically-static-top">20 pixes high</div>
<div id="vertically-resizeable-middle">adjustable height</div>
<div id="vertically-static-bottom">50 pixels high</div>
</div>
整体最大宽度和最大高度分别为1200和1000
垂直静态 div 只能在浏览器窗口调整大小时水平调整大小,但垂直方向它们的高度必须始终固定
vertically-resizeable div 需要根据窗口尺寸调整其宽度和高度。
我一直想不出如何让中间的 div 垂直调整大小并将所有内容都保留在浏览器窗口内!
非常感谢!
最佳答案
我认为您必须使用位置 absolute
。检查以下代码段。
html,
body {
font: 13px Verdana;
margin: 0;
height: 100%;
}
#container {
max-height: 1000px;
max-width: 1200px;
background: red;
color: #fff;
height: 100%;
position: relative;
}
#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
position: absolute;
left: 0;
right: 0;
}
#vertically-static-top {
height: 20px;
top: 0;
background: black;
}
#vertically-static-bottom {
height: 50px;
bottom: 0;
background: black;
}
#vertically-resizeable-middle {
top: 20px;
bottom: 50px;
}
<div id="container">
<div id="vertically-static-top">20 pixes high</div>
<div id="vertically-resizeable-middle">adjustable height</div>
<div id="vertically-static-bottom">50 pixels high</div>
</div>
我希望这会奏效。
关于html - 垂直调整 3 个 div 中的 1 个以适应窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48119405/