Question

我正在尝试创建一个跨越屏幕宽度的页脚。它嵌套在body标签中（使用margin left / right auto对中），宽度为825px，因此我将其取出并嵌套在html标签下，从而删除了宽度约束。

现在的样子是页脚元素与左下角的居中体标签对齐。我希望它从屏幕的左侧开始。

我必须做些什么才能使页脚元素跨越屏幕的整个宽度从左到右？

Answer 1

您不希望自己的页脚位于HTML标记之外。这样的事情应该有效。

如果您在body标签上设置了宽度，则100％将仅扩展到标签上设置的宽度。此外，如果您打算使用HTML5，我建议使用<footer></footer>标记。请记住，虽然HTML5需要黑客才能在旧浏览器上运行。

<style type="text/css">

body {/*use this to declare font-family and other common attributes */}
#header {width:825px;height:200px;margin:0 auto 0 auto}/*or whatever your dimensions are*/
#main-content-wrapper {width:825px;margin:0 auto 0 auto;}
#footer {width:100%;}


</style>

<html>
<head>
<title></title>
<head>

<body>

<div id="header"></div>

<div id="main-content-wrapper"></div>

<div id="footer"></div>

</body>

</html>

Answer 2

body, footer { 
    width:100%; 
}

#main {
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}

<body>
    <div id="main">
        /* Your page content */
    </div>
    <footer>
        /* Your footer content */
    </footer>
</body>

我完全赞同@ Yuri对你的帖子的评论：坚持规范，不要把标签放在<body>之外，甚至不要<html>。事件，如果大多数浏览器可能容忍，一些人可能会错误地呈现它。

Answer 3

我不太确定我是否完全理解你的意思。但我认为这可能对你有帮助。

CSS：

body, footer{
width:100%;
}

将页脚和主体的跨度（宽度）设置为屏幕宽度。

html5中的页脚

3 个答案: