Question

我正试图让我的标题遍及整个页面。我阅读了CSS页面中的CSS全页宽度页眉和页眉，以及页面帖子。我在CSS中尝试了部分Header ...使用宽度：1004px;没工作。我也试过宽度100％。我整个下午都在读书，不知道该怎么办。我希望我不会发送不必要的代码。谢谢

<html>
<head>    
    <title>some text</title>

    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="header">
            <img class="logo" src="file:///Users/janedoe/CGT136as/week07hw/website/images/lily-pads.jpg" alt="Admin Extraordinaire"  />           
        </div><!--/#header-->

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Read Our Blog</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div><!--/#nav--> 
   </div><!--/#container-->

</body>
</html>

/ *身体和容器 --------------------------------- * /

body { 
    font-size: 76%;
    background-repeat: repeat-x;
    padding: 0px;
    margin: 0px;
}

#container { 
    overflow: hidden;
    width: 900px;
    margin: 0 auto 0 auto;
}



 /* HEADER AREA
    ---------------------------------*/
    #header {
        float: left;
        width: 100%;
        height: 150px;
        padding: 0px;
        margin: 0px;
        background-color: #baaf07;
    }

Answer 1

您的div#container具有固定宽度。尝试将其更改为100%，如下所示：

#container { 
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0 auto;
}

http://jsfiddle.net/wmhAd/

Answer 2

您的容器内部有一个标题width: 900px;

#container { 
  overflow: hidden;
  width: 900px;
  margin: 0 auto 0 auto;
}

您必须将标题放在该div之外，它将是100％。

您也可以使用position: absolute;和left: 0;为其top: 0;提供。

Answer 3

您正尝试将100％的宽度指定给浮动容器。那不行。从float: left移除#header。

Answer 4

您的容器有限（900px）。因为您的标题位于容器内部，所以它也仅限于此。通过向标头添加position: absolute，它会忽略容器的限制。然后，您需要添加left: 0以确保标题从页面左侧开始。

<强> Example

#header {
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0px;
    margin: 0px;
    background-color: #baaf07;
}

标题不会遍历整个页面

4 个答案: