Html 如何使容器div填满100%的屏幕？_Html_Css_Height_Containers_Footer

Html 如何使容器div填满100%的屏幕？

html css

Html 如何使容器div填满100%的屏幕？,html,css,height,containers,footer,Html,Css,Height,Containers,Footer,我左右为难，无法将版权页脚移到页面底部，目前它坚持在我的页面中间，因为某种原因，当我尝试检查谷歌Chrome中的元素时，它告诉我我的容器高度只有471px（我屏幕的一半）。。。。但是在我的代码中，我没有限制我的身高，只有100%的最小身高，所以我不知所措。。任何帮助都将不胜感激。谢谢：）我会发布一张图片，但我需要10次。。。要做到这一点这些是我的CSS： html, body{ height:100%; } body { font-family: '', sans-serif; font-

我左右为难，无法将版权页脚移到页面底部，目前它坚持在我的页面中间，因为某种原因，当我尝试检查谷歌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">

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

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

</div>  //div end footer

</div>  //div end container

</body>


所有图像©；2013 . 版权所有。
//div结束页脚
//端部容器

您首先需要删除此项，因为您的页脚超出了主布局，然后进行调整。

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

我已经更新了代码，请用这个

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


var windowheight=$（window.height（）；
var footerheight=$（footer.height（）；
var maincontentheight=窗口高度页脚高度
$（“#容器”）.css（{'height'：maincontentheight+'px'}）；

不，您必须将代码放在标题（head）部分

java脚本代码将被删除


var windowheight=$（window.height（）；
var footerheight=$（footer.height（）；
var maincontentheight=窗口高度页脚高度
$（“#容器”）.css（{'height'：maincontentheight+'px'}）；

请使用此代码

哪个零件显示471px？？还有你在看什么浏览器？你在哪里关闭#容器？@MrSoundless-oops我错过了一个抱歉的@NathanLee我使用Google Chrome，所以当我预览我的页面时，我右键点击页面并进入“inspect element”，当我将鼠标悬停在我的#容器上时，它说它的高度只有471px…即使我将高度设置为100%，也只相当于站点大小的一半，所以我只是想知道为什么100%的高度没有延伸到页面的实际底部？嗯，我已经从代码中删除了这一行，并使用top:1000px；删除后，它实际上没有改变站点中的任何内容，但仍然保留在站点中间错误位置-->的位置<代码>#页脚{宽度：自动；文本对齐：居中；字体大小：8px；颜色：#54c0cc；字体系列：'Arimo'，无衬线；文本转换：大写；顶部：1000px；左侧：40%；高度：60px；}对不起，我对javascripts很感兴趣。首先，我要把这些标签放在我的HTML中吗？第二，我到底要在代码中修改什么？当我尝试插入数字时，Dreamweaver中不断出现错误。另外，我应该在写有“#container

在这里输入code

”的地方插入什么？谢谢目前我已经添加了

var windowheight=$（window.height（）；var footerheight=$（footer.height（）；var maincontentheight=windowheight footerheight$（“#容器在此处输入代码”）.css（{'height'：maincontentheight+'100%}）；

我将其改为%而不是使用px，以便将其简化为各种浏览器大小。但我不知道这是不是最终把我搞砸的东西哈哈。。。

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

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

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