HTML divs:自动高度和溢出:自动?

时间:2010-09-13 00:35:08

标签: html css

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

感谢任何帮助过的人。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

为了使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。如果添加更多填充文本,您将看到页脚被正确按下。

答案 2 :(得分:0)

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

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

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

干杯

林登