Question

我正在尝试设计一个包含溢出内容区域的网站：auto和动态高度。最好是，我希望能够在溢出下面放置一个顶部和一个页脚的头部：自动div，并让该div占用剩余的空间，但到目前为止，这已经证明是困难的。高度：自动无效，溢出：自动需要高度，所以我不能不设置它。有任何想法吗？我的代码可以在这里找到：http://abbottconstruct.com/wp-content/themes/abbott/index.html

感谢任何帮助过的人。

Answer 1

您是否尝试过基于百分比的高度甚至是“position:fixed”页脚？看看这个：

http://www.d2burke.com/dev/d2v6/autoheight.html

Answer 2

为了使CSS百分比高度起作用，元素的父级必须定义高度。因此，我们可以使用以下标记来完成：

<body>    
    <div id="content">
        <div id="header">Header</div>
        <div id="text">
           Text content of your page
        </div> 
    </div>
    <div id="footer">Footer</div>    
</body>

除页脚之外的所有网站内容都包含在#content元素中。然后使用min-height: 100%声明始终至少为其父级高度的100％。由于它的父体是主体并且具有高度声明，因此按预期工作。

最后，页脚以负边距进入视图，并且填充底部添加到#text元素，因此其内容不会意外重叠。

CSS如下：

html, body {
   height: 100%; 
   padding: 0;
   margin: 0;
}

#content {
   min-height: 100%; 
   /* IE6 will need height: 100% defined in an IE6 only stylesheet */
}

#header, #footer {
   height: 100px;  
}    

/* Bring the footer into view */
#footer {
   margin-top: -100px;     /* footer's height */
}

/* Make sure footer doesn't overlap #text element */
#text {
   padding-bottom: 100px;  /* footer's height */
}

你可以看到它in action here。如果添加更多填充文本，您将看到页脚被正确按下。

Answer 3

对于像这样的液体布局，我倾向于设置一个非常基本的表（不像有些人想的那样邪恶），因为他们进行这些自动计算，你需要计算浏览器的高度/宽度并减去某个值。你。

测试一下，看看你怎么走。

http://lm-86.com/html_tests/liquid_header.html

干杯

林登

HTML divs：自动高度和溢出：自动？

3 个答案: