0

我想知道，如果我希望页眉的紫色和页脚的蓝色在页面上 100% 延伸，但保持中间的内容与中间的橙色对齐，我应该如何实现呢？

我是否必须在页眉和页脚周围添加额外的 100% div 并在其中着色？这似乎是一种糟糕的做法。

这是我正在使用的代码：http: //jsfiddle.net/HMsKa/21/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
        <title>Title</title>
        <link href="/static/css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="header" class="thin_width" >

                        <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
                        <ul>
                            <li><a href="/posts/list/">Link1</a></li>
                            <li><a href="/posts/create/">Link 2</a></li>
                            <li><a href="/about">Link 3</a></li>
                        </ul>
            </div>
            <div id="content" class="thin_width">
            <h1>Sed ut perspiciatis unde</h1>
            <form id="searchForm" action="/search">
                <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword">
                <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location">
                <input type="submit" class="button r2 b1 ts3" id="button_search" value="Search">
            </form>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>            
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
       </div>
       <div id="footer" class="thin_width">
           &#169; 2012 Company, Inc.
           <ul>
               <li><a href="/contact">Contact</a></li>
               <li><a href="/faq">FAQ</a></li>
               <li><a href="/terms">Terms</a></li>
               <li><a href="/privacy">Privacy</a></li>
           </ul>
        </div>
        </div>
    </body>
</html>

CSS

/* GENERAL */
html { height:100%; }
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }
p { font size: 13px; margin: 10px 0; padding: 0; }
h1 { font-size: 22px; }  
h2 { font-size: 17px; }  
h3 { font-size: 14px; } 
blockquote { font-style: italic; }

.thin_width { width: 600px; }

#container { min-height: 100%; position: relative; background-color: red;
width: 600px;
margin: 0 auto;
}
#content {padding-bottom: 80px; background-color: orange;}
#footer { 
    position:absolute; 
    bottom: 0; 
    clear: both; 
    float:left;
    height:60px;
    background-color: blue;
}

#footer li { display:inline; }

#header {background-color: purple;}
4

1 回答 1

1

你可以这样做：我的小提琴

怎么做 ：

只需从包装器中取出页眉和页脚，div并为页眉和页脚提供 100% 的宽度。

要使页眉和页脚的内容居中，您需要将页眉和页脚中的内容包装在一个包装器 div 中，给它一个widthof600px;并使用margin: auto;它来将它带到您的页面流中

于 2012-10-10T14:55:08.513 回答