html - 如何让容器 div 占满屏幕的 100%?

标签 html css height containers footer

我遇到了无法将版权页脚向下移动到页面底部的困境,目前由于某种原因,当我尝试检查 Google Chrome 中的元素时,它坚持位于我的页面中间它告诉我我的容器只有 471px 的高度(我屏幕的一半)....但我没有在我的代码中的任何地方限制我的高度,只有 100% 的最小高度所以我不知所措..任何帮助将不胜感激。谢谢:)

我会张贴图片,但我需要重复 10 次...才能做到...

这些是我的 CSS:

html, body{
height:100%;
}

body {
font-family: '', sans-serif;
font-size:16px;
color:#33767d;
text-align:left;
background-image:url();
background-repeat:no-repeat;
background-color:#FFF;
position:relative;
margin:0;
}

#container {
float:none;
margin:0px;
width: 85%;
margin-top:20px;
position:relative;
margin-bottom:0;
min-height:100%;
}

#footer {
position:absolute;
width:auto;
text-align:center;
font-size:8px;
color:#54c0cc;
font-family:'', sans-serif;
text-transform:uppercase;
top:100%;
left:40%;
height:60px;
}

和我的 HTML:

<body>
<div id="container">

--> Logo 和导航栏以及联系信息在这里

<div id="footer">
    All Images &#169; 2013 . All Rights Reserved. 

</div>  //div end footer

</div>  //div end container

</body>

最佳答案

您可以使用javascript 将页脚保留在页面底部,只需计算窗口的高度和页脚的高度

我已经更新了代码,请使用它。

<script>
var windowheight = $(window).height();
var footerheight = $(footer).height();
var maincontentheight = windowheight-footerheight
$("#container").css({'height':maincontentheight +'px'});
</script>

关于html - 如何让容器 div 占满屏幕的 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18527255/

相关文章:

iOS 11 - 无法更改导航栏高度

javascript - 视口(viewport)分辨率自行改变

html - 添加这个按钮

javascript - Angularjs 复选框在加载时默认选中,但在具有 ng-true-value 的表单中不起作用

javascript - 遍历数组文本响应

javascript - 如何将焦点集中的div居中? [垂直]

javascript - 如何使用jquery调整图像大小并防止无图像

css - 如果表格宽度超过页面,则更改 CSS

html - 在 div 元素内居中文本

css - 由于 HTML5 ASP.net 中的 DOCTYPE,100% 高度不起作用