Question

我确信这会因为缺乏HTML而受到关注，但我真的只是在寻找能否完成的答案。

基本上我正在使用幻灯片插件，无论div的大小如何都要自行调整大小，我需要该div根据页面大小动态设置其高度。

Answer 1

// HTML
<div id="wrapper">
    <div id="header" style="background-color:red;height:20px;">
    </div>
    <div id="content">
    </div>
    <div id="footer" style="background-color:blue;height:20px;">
    </div>
</div>

// CSS
* { width: 100%; margin: 0px; }
#wrapper { height: 100%; }
#header { position: absolute; top:0; }
#content { position: relative; padding: 20px 0px; }
#footer { position: absolute; bottom:0; }

Answer 2

通过粘性页脚我假设你的意思是position:fixed。是的，这可以做到。您所要做的就是通过将div指定为百分比来使height做出响应;比如height: 80%。

然而，为了使其工作，div的父容器也需要设置其height属性。例如，你可以做

body 
{
    height: 100%;
}

.responsiveDiv
{
    height: 80%;
}

简单地说

<body>
    <header></header>
    <div class="responsiveDiv">Slideshow stuff</div>
    <footer></footer>
</body>

当然，你必须适当地设置header和footer的高度，以确保没有任何重叠。

如何动态调整div的大小以填充页面的高度，但要注意粘性页脚？

2 个答案: