Question

我网站的导航栏未扩展到我的网页的完整高度。我想扩展它，以便完美地适合页面。这是我的代码。

HTML

<div id="Nav">
<div id="NavContent">
    <h1>Header</h1>
</div>

CSS：

#Nav {
    width:100%; 
    background-color:#f26522;
}

#NavContent {
    margin:0 auto;
    width:9999px;
}

如何解决此问题？感谢。

Answer 1

您需要从文档中删除自然padding和margin以及h1（具有默认值）

body{
    margin: 0;
    padding: 0;
}

h1{
    margin: 0;
    padding: 0;
}

Answer 2

尝试：

#Nav {
    position:absolute;
    top:0px;
    left:0px;
    width:100%; 
    background-color:#f26522;
}

#NavContent {
    margin:0 auto;
    width:100%;
}

小提琴：http://jsfiddle.net/7vLPb/

小提琴（全屏）：http://jsfiddle.net/7vLPb/show/

Answer 3

去搜索'css reset'并复制代码。

基本上，浏览器已经存在边距，填充等，这可能会妨碍。很多人都使用css重置。将css重置放在css文档的顶部。这应该删除阻碍你的填充和边距。

还要确保将导航栏的宽度设置为100％。祝你好运！

将导航栏扩展到全宽

3 个答案: