1

我试图让我的标题跨越整个页面。我阅读了跨页面帖子的 CSS Full Page Width Header 和 Header in 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;
    }
4

4 回答 4

1

你div#container有一个固定的宽度。试着把它100%改成这样：

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

http://jsfiddle.net/wmhAd/

于 2013-10-17T22:14:48.883 回答
0

你有容器内的标题，它有一个width: 900px;

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

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

你也可以position: absolute;用left: 0;and给它top: 0;。

于 2013-10-17T22:14:49.100 回答
0

您正在尝试将 100% 的宽度分配给浮动容器。那是行不通的。float: left从中删除#header。

于 2013-10-17T22:15:12.440 回答
0

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

例子

#header {
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0px;
    margin: 0px;
    background-color: #baaf07;
}
于 2013-10-17T22:16:26.673 回答