Question

我遇到的问题是，我的一个元素100％在整体布局中100％。

我尝试了不同的定位解决方案，我最后得到隐藏的内容，底部的页脚后面的浮动内容，或者内容最终会在页脚后面，并且在页脚之后加载。

以下是我对页面布局的看法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>
<style>
    *{margin:0}
    html,body{margin:0; padding:0; height:100%}
    .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
    .container{width:930px; margin:0 auto; text-align:left}
    .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
    .left{float:left; width:240px}
    .content{padding:10px}
    .footer{position:absolute; width:100%}
    .footer,.push{height:200px}
</style>
</head>

<body>

<div class="wrapper">
<div class="container">
<div id="left">
   left
</div>
<div class="right">

<div class="content">
    content
</div>

</div>
<div class="push"></div>
</div>
<div class="footer">
    footer
</div>
</div>

</body>
</html>

页面布局为100％高度和页脚底部的布局使其只是具有类名称内容的div，我希望100％也是如此，如果内容到达页脚，则将页脚向下推进不会消失。

最值得赞赏的任何帮助。

http://img686.imageshack.us/img686/7725/screenshotbj.png

Answer 1

回答animuson：实际上IE6支持需要以下代码：

min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/

IE6不理解!important，但它确实将高度视为最小高度。因此，要支持IE6和现代浏览器，您必须使用完全相同的代码（顺序很重要）。

Answer 2

正确的CSS应如下所示：

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>

我相信这会对你有帮助。

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

            <div class="content">
                content
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

看起来你想拥有它。页脚位于底部，每次都像你想要的那样:) 希望它有所帮助！

Answer 3

直到稍后才能查看代码，我想把类“clearfix”放到没有用白色完全展开的div上。

Here是你可以很好地定义clearfix的定义，以及css的定义。

Answer 4

另一种解决方案是使用javascript（显然不是最干净的方式，但在某些情况下它可能很有用）。

使用jQuery：

//Get height
var divHeight = $('#div').height();

//Apply css rule
$('#anotherDiv').css('height', divHeight);

Answer 5

很晚才回答，但对其他人可能有用。你可以简单地使用100vh（vh是视口高度单位）

Answer 6

在你的代码页脚中有position：absolute但是没有给出实际位置（例如bottom：30px;）。此外，如果您希望.content或.push影响.footer位置，则它们必须位于相同的流中（例如，两个位置：静态;）。赋予页脚位置：绝对定义从正常流程中获取页脚定位，因此这与目标不相容。

我认为你要做的是获得一个100％即使内容很少的页面，以及一个始终位于页面/屏幕底部的页脚。

FooterStickAlt是一个很好的跨浏览器解决方案来实现这一目标。 http://www.themaninblue.com/experiment/footerStickAlt/

Answer 7

根据Cen写的一个导演找到了我自己的解决方案;用Faux Columns搜索了100％布局并得到了http://www.savio.no/examples/three-column-layout-6.asp

通过一些调整和拼接我的布局不同，我提出了以下解决方案，适用于所有浏览器。

CSS 100％高度的身体和元素

7 个答案: