Question

正如我所理解的，对于div实际上是100％的高度，父div需要设置正确吗？

所以，设想一个看起来像这样的div结构：

    <title>A CSS Sticky Footer</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>
<body>

    <div class="wrapper">
        <div class="header">Header</div>
        <div class="gallery">gallery</div>
        <div class="push">This is inside the push</div>
    </div>
    <div class="footer">Footer</div>

</body>

这应该是基于Ryan Faiths粘性页脚布局的粘性页脚布局。

在这种情况下，画廊如何拥有100％的高度以及包装？我无法弄清楚这一点。

我的CSS看起来像这样：与Ryan的CSS完全相同，只是添加了库类。

* {
         margin: 0;
}

html, body {
         height: 100%;
}

.gallery {
         background-color:blue;
         height: 100%;
}

.wrapper {
         min-height: 100%;
         height: auto !important;
         height: 100%
         margin-left: auto;
         margin-right: auto;
         width:830px;
         margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
         height: 142px;
         margin-left: auto;
         margin-right: auto;
         width: 830px;
}

Answer 1

（删除所有旧内容）

这是包含100％图库的新HTML，希望它有效： - ）

<!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">
<head>   
    <title>A CSS Sticky Footer</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
     <style type="text/css">
     * {
         margin: 0;
        }

        html, body {
            height: 100%;
        }

        .header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}

        .gallery {background-color:blue;height: 100%;}

        .wrapper {
            height: 100%;
            margin: 0 auto;
            width:830px;
        }

        .footer, .push {
            height: 80px;
            width: 830px;
            background-color: #CCFF00;
            position: fixed;
            bottom:0;
        }

     </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content gallery">gallery</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Answer 2

我不知道这在技术上是否是一个答案，但它更多的是答案而不是评论所以这里是：

我个人不喜欢Ryan Fait Sticky Footer方法，我更喜欢这里使用的方法：http://www.digital-web.com/extras/positioning_101/css_positioning_example.php。对我来说，这是一个更清洁的解决方案，从设计和标准的角度来看更有意义。根据我的经验，它几乎100％工作，并在其余时间优雅地降级。

我的2点......

CSS - 多个100％高度div？

2 个答案:

这是包含100％图库的新HTML，希望它有效： - ）