<section>
<div class="section-wrap">
<h1>page1</h1>
</div>
</section>
<section>
<div class="section-wrap">
<h1>page2</h1>
</div>
</section>
我尝试使用 javascript
但只有当 div 内容小于定义的高度时才有效
<script type="text/javascript">
$(function(){
var windowH = $(window).height();
var wrapperH = $('section').height();
if(windowH > wrapperH) {
$('section').css({'height':($(window).height())+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('section').height();
var differenceH = windowH - wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $('.section-wrap').height();
if(windowH > truecontentH) {
$('section').css('height', (newH)+'px');
}
})
});
</script>
最佳答案
要使部分元素始终至少具有视口(viewport)的高度,请使用此 CSS:
section {
min-height: 100vh;
}
很漂亮well supported , 甚至 IE 从版本 9 向上支持它。有一个值得注意的异常(exception):iOS 7 中的移动版 Safari 支持错误。
要避免这个问题,您可以使用 JavaScript。通过使用 polyfill 或类似的东西:
jQuery(document).ready(function() {
jQuery(window).on('resize orientationchange', function() {
var windowHeight = jQuery(window).height();
jQuery('section').css('min-height', windowHeight + 'px');
});
});
但是,如果没有 JS,这将停止工作。我也相信它可能需要大量计算。
另一种方法是将这样的规则添加到您的 CSS 中:
@media (min-height: 1000px) {
section {
min-height: 1000px;
}
}
@media (min-height: 1010px) {
section {
min-height: 1010px;
}
}
// Same for many other heights.
这里的问题是可维护性,因为您需要超过 100 条规则。但这可以使用 CSS 预处理器来解决。在 LESS 中它可能看起来像这样:
.min-height-100vh(@height) when @height > 0 {
@media (min-height: @height) {
min-height: @height;
}
.min-height-100vh(@height - 10px);
}
section {
.min-height-100vh(3000px);
}
这将生成大约 300 个媒体查询,这会增加样式表的大小,也可能会增加所需的处理能力。
关于javascript - 窗口高度为 100% 的响应式设计,当父 div 内容大于定义的高度时推送兄弟 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28657264/