可滾動的全高 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.