可滚动的全高 div
[英]Scrollable full height div
问题描述
如何使用 div 实现全高页面应用程序，该 div 占据横幅下的剩余高度并使用滚动剩余部分。
中间的 div 是我需要滚动的那个，如这个小提琴所示。
html { height: 100%; } body { margin: 0px; display: flex; flex-direction: column; } .section { display: flex; } .content { background: gold; overflow: scroll; flex: 1; } .left { background: tomato; } .right { background: lightgreen; }
<body> <div> header banner </div> <div class="section"> <div class="left"> should always fill remaining height (Works) </div> <div class="content"> main content: fills remaining space then overflows with scrollbar (doesnt work)<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> </div> <div class="right"> should always fill remaining height (Works) </div> </div> </body>
非常感激
1 个解决方案
解决方案1
0 2021-10-31 05:00:55
如果标题的高度是用 CSS 设置的，您可以设置.content以使用calc函数100vh视口的完整高度 ( 100vh ) 减去标题的高度。
.header {
height: 20px;
}
.content {
height: calc(100vh - 20px);
}
如果标题的高度可以根据其内容而改变，您可以使用 javascript 设置.content页面加载和调整大小时的高度。
function setContentHeight() {
let header = document.querySelectorAll('.header')[0];
let content = document.querySelectorAll('.content')[0];
if (header && content) {
content.style.setProperty('height', 'calc(100vh - ' + header.offsetHeight + 'px)');
}
}
document.addEventListener('ready', function() {
setContentHeight();
window.addEventListener('resize', setContentHeight);
});
使用 flexbox 的可滚动全高 div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.