Question

由于无法将版权页脚移到页面底部，我陷入了两难境地，目前它仍然坚持在我尝试检查Google Chrome中的元素时出于某种原因处于页面中间位置它告诉我我的容器只有471像素的高度（我的屏幕的一半）....但我没有在我的代码中限制我的高度，只有最小高度为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">

- ＆GT;徽标和导航栏以及此处的联系信息

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

</div>  //div end footer

</div>  //div end container

</body>

Answer 1

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

我已更新代码，请使用此功能。

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

Answer 2

#footer {
    position:absolute;
}

您需要先将其删除，导致页脚超出主要布局，然后进行调整。

Answer 3

不，你必须把你的代码放在标题（头部）部分

<script>java script code will be heer<script>

Answer 4

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

请使用此代码

如何让容器div填满100％的屏幕？

4 个答案: