0

我的包装是 1000px。我怎样才能让我的导航栏和页脚成为整个页面？如果尝试将导航和页脚从包装器中取出，则不会居中。

<html>
<head>
<meta charset="utf-8"/>
<title>  
</title>
</head>
<body>
    <div id="wrapper">
    </div>
</body>
</html>

CSS

*{
margin:0px;
padding:0px;
list-style-type:none;
}
body
{
background:white;
text-align:center;
font-family:Arial;
font-size:12px;
}
#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 }
4

3 回答 3

2

如果我理解正确，您将不得不在包装器的#nav外部#footer制作以使您自己轻松完成此操作。#wrapper你给它们两个与 CSS中相同的属性，#nav然后给出#footer100% 的宽度。

我创建了一个jsfiddle。您必须扩展结果窗口才能看到它的实际效果。

HTML

<body>
    <div id="nav">
        Nav
    </div>
    <div id="wrapper">
        Wrapper
    </div>
    <div id="footer">
        Footer
    </div>
</body>

CSS

*{
  margin:0px;
  padding:0px;
  list-style-type:none;
}
body
{
  background:white;
  text-align:center;
  font-family:Arial;
  font-size:12px;
}
#wrapper, #nav, #footer
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 background-color: #eee;
 }

#nav, #footer {
 width: 100%;   
}
于 2013-09-13T22:00:06.020 回答
2

将导航和页脚放在包装器之外。和：

#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
}

footer, #footer, .footer, nav .nav, #nav /* etc - whatever you're using */  {
 width:100%;
 text-align: center;
}

如果您希望所有内容都集中在这些区域中，而不仅仅是文本。将 #wrapper 更改为不是 id 的类（ .wrapper ），然后在页脚或导航中添加。例如

<footer>
 <div class='wrapper'>
  <!-- content here -->
 </div>
</footer>

希望这能回答你的问题，因为它有点不清楚。

于 2013-09-13T22:00:23.757 回答
0

我不知道问题是什么，但尝试使用下面的代码。我想这就是你想要的？

<style>*{
margin:0px;
padding:0px;
list-style-type:none;
}
body
{
background:white;
text-align:center;
font-family:Arial;
font-size:12px;
border: 2px solid #222;
min-height:600px;
}
#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 border: 2px solid #000;
 min-height:300px;
 }

 footer{
 border: 2px solid red;
 }
 </style>
 <html>
<head>
<meta charset="utf-8"/>
<title>  
</title>
</head>
<body>
    <div id="wrapper">
    wrapper
    </div>
    <footer>
    footer
    </footer>
</body>
</html>
于 2013-09-13T21:49:05.023 回答