Question

<div class="main">
    <div class="topContent">
         content goes here
    </div> 
</div>
<div class="footer">
</div>

我的代码是这样的，我希望页面随着屏幕分辨率的增大而扩展。有可能吗？

我的整个网站应该在首屏之上，没有滚动，页脚应该展开以适应屏幕分辨率。

Answer 1

如果您希望页脚占据整个屏幕高度，请不要使用高度。如果你想根据屏幕分辨率使用其他高度，你需要javascript / jquery

为页脚提供一个id（例如：页脚）并尝试：

<script type="text/javascript">
//Determine screen resolution
screenheight = screen.height;
d = document.getElementById('footer');
if (screenheight == 1024)
{
    d.style.height="500px";
}
else
{
    d.style.height="600px";
}
</script>

Answer 2

position:fixed;
left:0px;
right:0px;
height:5% /*you can change this to your wish*/

页脚，如果你不希望你的内容隐藏在页脚后面，那么：

position:fixed;
left:0px;
right:0px;
height:95% /*this will be 100 - height of footer*/

另一个div应该包含你的标题和内容

Answer 3

百分比比例，与屏幕分辨率相关，因此您只需将高度指定为百分比。

#footer { height: 10%; }

底部div根据屏幕分辨率扩展

3 个答案: