Question

CSS仙境。我的梦想是至少了解100％布局的粘性页脚和标题。我一直在浏览网页，发现了五种不同的方法。

我认为存在某种共同点。我希望全世界都知道它！

我要求你深入比较这些做法，并告诉我们每个人所包含的陷阱。每个布局会出现哪些问题？是否可以使用内部浮动等来打破它？我该怎么办呢？哪个浏览器不包括在内？

需要示例

Answer 1

这些的常见方面是边距不包含在元素的高度中，可以是负数。将高度设置为100％会将内容包装div的高度设置为与屏幕相同的高度。对元素应用负边距意味着下一个兄弟在元素内开始。

在第一个例子中，内容包装器是div＃wrapper，它的下一个兄弟是div＃footer。首先，包装器的高度设置为屏幕的高度（对#wrapper，body和html应用100％的高度）。这将导致包装器使整个视图端口和页脚不在视线范围内。将负边距值等于#footer的高度会将页脚元素向上移动，使其返回到视图中。

Answer 2

我曾经发现了一个令人惊奇的模板，令人惊讶地适用于所有浏览器，甚至是IE6，我无法记住链接，但这里是CSS及其HTML：

CSS：

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}


/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

这是HTML：

<body>

<div id="wrapper">


    <div id="header">
        <div id="header_900">
            <p>header</p>
        </div><!--header_900-->
    </div><!--header-->


    <div id="content">
        <div id="content_900">
            <p>content</p>
        </div><!--content-->
    </div><!--content-->


</div><!--wrapper-->


<div id="footer">
    <div id="footer_900">
        <p>footer</p>   
    </div><!--footer_900-->
</div><!--footer-->


</body>

高度：100％和粘滞页脚布局。最后的战斗

2 个答案: