我创建了一个sidenav推送。我写了一个javascript函数来计算页眉和页脚之间的剩余高度:
function resizeWindow(){
var headerHeight = $("#header-web").height();
var footerHeight = $("#web-footer").height();
var windowHeight = $("html").height();
var remainHeight = windowHeight-headerHeight-footerHeight;
$("#mySidenav").css({"height":remainHeight});
}
然后,我在负责打开sidenav的那一个内部调用它:
function openNav() {
resizeWindow();
document.getElementById("mySidenav").style.width = "400px";
document.getElementById("map").style.marginRight = "250px";
}
我正在Mac上工作,当窗口完全打开时,sidenav占据了适当的位置,但是当缩小窗口或尝试在另一台计算机上打开它时,div不能很好地放置在页眉和页脚之间。
以下捕获显示了该问题:
如果您对问题的根源有任何想法,我将很高兴向您学习!
最佳答案
完全不需要javascript,您可以使用纯CSS处理此问题
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
display:flex;
flex-direction:column;
overflow:hidden;
height: 100vh;
}
.wrapper > header {
background:#f5f5f5;
padding:30px;
flex: 0 0 auto;
}
.wrapper > main {
position:relative;
flex: 1 1 auto;
overflow: hidden;
display: flex;
}
.wrapper > main > .scroller {
width: 100%;
min-height:100%;
overflow:auto;
padding:30px;
}
.wrapper > main > aside {
position:absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
color:#eee;
background:#000;
padding:30px;
}
.wrapper > footer {
background:#f5f5f5;
padding:30px;
flex: 0 0 auto;
}
<div class="wrapper">
<header>
header
</header>
<main>
<div class="scroller">
main content
</div>
<aside>
sidebar
</aside>
</main>
<footer>
footer<br>brrrr<br>brrrrrrrrr
</footer>
</div>
关于javascript - 页眉和页脚之间的高度计算,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53609418/