0

假设我有一个这样的标记：

<div id="container">    
    <div id="header">content</div>
    <div id="left-column">content</div> 
    <div id="right-column">content</div>
    <div id="footer">content</div>
</div>

#container 居中并固定在 1000px，#header 和 #footer 为 1000px，#content-left 和 #content-right 向左浮动，各 500px。

如果容器是固定的，如何将页眉和页脚背景颜色扩展到浏览器窗口的全长？

4

3 回答 3

1

首先，稍微改变一下你的 html 结构。
当您在那里时，为什么不将 html5 用于页眉和页脚元素。

html

<header>
    <div class="container">
        content
    </div>
</header>
<div class="container">
    <div id="left-column">content</div>
    <div id="right-column">content</div>
</div>
<footer>
    <div class="container">
        content
    </div>
</footer>

Css
Than，在 Css 中，将页眉和页脚宽度设置为 100%，并让它们变成你想要的颜色。在此示例中为红色。比使用一个类.container来使内容（页眉、主要部分、页脚）显示在屏幕中间，但没有任何背景颜色。

header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}

希望这有帮助:)

于 2011-10-06T02:39:37.557 回答
0

页眉和页脚 div 需要位于容器 div 之外。将背景颜色应用于页眉/页脚周围的包装。

html

<div id="header-wrapper">
    <div id="header">content</div>
</div>
<div id="container">
    <div id="left-column">content</div>
    <div id="right-column">content</div>
</div>
<div id="footer-wrapper">
    <div id="footer">content</div>
</div>

css

#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
于 2011-10-06T02:20:26.373 回答
0

接受的答案确实是实现这一目标的糟糕方法。HTML 用于内容的语义含义。 从容器中删除标题不是语义！ 这是一种更好的方法，它仍然保留语义内容：http ://css-tricks.com/full-browser-width-bars/ 。

于 2012-04-28T07:10:35.987 回答