My Website我这里有一个页面 About Us由于缺少内容，我们无法覆盖屏幕的完整高度。我的页脚开始漂浮在空中..我尝试在字段集中使用最小高度来做到这一点，但不幸的是，它只在我的浏览器上工作，只要我改变我的浏览器或尝试在其他系统上问题再次出现......
我试过:
CSS
html,body{
min-height:100%;
height:100%;
}
[id]center_wrapper{
min-height:100%;
height:100%;
}
Javascript
var body1 = document.getElementsByTagName('body')[0];
console.log(body1);
body1.style.minHeight = screen.height;
body1.style.height = screen.height;
console.log(body1.style.minHeight);
jQuery
$('body').css('min-height', screen.height);
$('body').css('height', screen.height);
console.log(document.getElementsByTagName('body')[0].style.minHeight);
同时使用 jQuery 和 javascript 控制台日志时，它确实显示 704px 但不是 704px..我猜测这可能是因为在创建 DOM 后发生了变化..
任何帮助..
最佳答案
我想我会添加一个答案，因为我正在寻找这个问题的解决方案并找到了一个 here , 不需要 javascript。
从链接文章中获取的代码:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
HTML 是基本的，在正文中直接有一个包装器。
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
CSS 的关键点是 wrapper 的 min-height:100% 和 footer 绝对定位在它的底部。您需要确保 html 和 body 元素的样式也符合指定的样式，并在底部为内容留出一些空间，因为页脚会覆盖它。
如果内容较短，页脚将贴在窗口底部，但如果内容较大，则页脚会被推到底部之外。
关于javascript - 如何使 body 的最小高度等于 screen.height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17120198/