我只想在一些固定文本下方创建一个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.
我尝试了此代码，该代码通过jQuery调整了高度.它在Chrome浏览器中效果很好，但在Chrome浏览器中效果不佳:如果向下滚动，我们会看到它不会自动恢复到初始位置.
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="code.jquery/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填充页面的其余部分(跨浏览器)
发布评论