我只是想在一些固定的文本下面做一个 div，我希望 div 正好填充页面的高度，我希望它跨浏览器工作......很难相信有多少这样的工作一项自然任务需要。
我试过了 this code , 它通过 jQuery 调整高度。它在 Chrome 中运行良好，但在 Chrome 中运行不完美:如果我们向下滚动，我们可以看到它不会自动恢复到初始位置。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0
}
.rb .myME {
background: grey
}
</style>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
<script>
$(".myME").css({
height: (($(document).height()) - $(".top").height()) + 'px'
})
</script>
</body>
</html>
有没有人有跨浏览器的完美解决方案(CSS 或 jQuery)？
最佳答案
对于旧版和新版浏览器，display:table 属性可以满足您的要求。
html,
body,
.rb {
margin: 0;
height: 100%;
}
.rb {
display: table;
width: 100%;
border-collapse: collapse;
}
.top, .myME {
display: table-row;
}
.buffer {
display: table-cell;
}
.top .buffer {
background: lightblue;
}
.myME .buffer {
background: tomato;
height:100%;
}<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer">
abc
</div>
</div>
</div>.buffer div 是为了确保您的每一行都由一个单元格组成，以避免布局也被拆分成列。
关于javascript - 制作一个 div 填充页面的其余部分(跨浏览器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45644110/