使div填充页面的其余部分(跨浏览器) [英] Make a div fill the rest of the page (cross-browser)
问题描述
我只想在一些固定文本下方创建一个div，并且希望div恰好填充页面的高度，并且希望它跨浏览器工作...很难相信这样的工作量自然任务需要.
I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much work such a nature task requires.
我尝试了
I tried this code, which adjusts the height by jQuery. It works well in Chrome, but it does not work perfectly in Chrome: if we scroll down, we could see it does not automatically restore to the initial position.
<!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)吗?
Does anyone have a perfect solution (CSS or jQuery) cross-browser?
推荐答案
对于较新和较旧的浏览器，display:table属性可以满足您的要求.
for older and newer browsers , the display:table properties could match your requirement.
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是为了确保您的每一行都由单个单元格组成，以避免布局也分成几列.
the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.
这篇关于使div填充页面的其余部分(跨浏览器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
