Question

这是我的HTML：

 <body>
     <nav>
       <div id="navBar">
        <ul> 
         <li><a href="esileht.html">ESILEHT</a></li>
         <li><a href="uudised.html">UUDISED</a></li>
         <li><a href="ülevaated.html">ÜLEVAATED/ARVUSTUSED</a></li>
         <li><a href="login.html" id="logimine">LOGI SISSE</a></li>
        </ul>
       </div>
     </nav>
     <div class="content">
      <div id="logo">
       <img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
      </div>
      <div id="tervitus">
       <h3 id="tere">TERE TULEMAST</h3>
      </div>  
     </div>
     <div class="artikkel">
      <p>check check</p>
     </div>
     <footer>&copy;2014 Janno.</footer>
    </body>
    </html>

这是我的CSS：

#navBar{
 width: 100%;
 float: left;
 position: absolute;
 top: 0;
 background-color: #000000;
 left: 0;
 min-width:760px;
}

#navBar ul{
 list-style:none;
 margin: 0 auto;
}

#navBar li{
 float: left;
}

#navBar li a:link , a:visited{
 font-size: 90%;
 display: block;
 color: #ffffff;
 padding: 20px 25px;
 font: 18px "open sans", sans-serif;
 font-weight: bold;
 text-decoration: none;
}

#navBar li a:hover{
 background-color: #F0F0F0;
 color: #000000;
 text-decoration: none;
}

#logimine{

}

body{
 margin: 15px;
 padding: 15px;
 background-color: #F0F0F0;
 min-width: 700px;
}

.content, .artikkel{
 max-width: 65%;
 margin: 1em auto;
 box-shadow: 0 3px 7px rgba(0,0,0,.8);
 background-color: #ffffff;
 padding: 3em;
 padding-bottom: 350px;
 margin-bottom:50px;
}

#tervitus{
 background-color: black;
 color: white;
 font: 18px "open sans", sans-serif;
 font-weight: bold;
}

#tere{
 margin-left: 5px;
}

#logo{

}

#regnupp{
 color: blue; /*miks see valge on muidu*/
}

.uudised{
 max-width: 65%;
 margin: 4em auto;
 box-shadow: 0 3px 7px rgba(0,0,0,.8);
 background-color: #ffffff;
 padding: 3em;
 padding-bottom: 350px;
 margin-bottom:50px;
}

.uudised{
 padding-left: 115px;
}

.uudised img{
 float: left;
 width: 100px;
 margin-left: -75px;
}

.uudised p, h2{
 margin-left: 50px;
}

.uudised hr{
 margin-top: 50px;
 margin-bottom: 50px;
}

footer {
 text-align: center;
 margin: 0 auto -40px;
 width: 100%;
 padding-top: 5px;
 padding-bottom: 5px;
 font-weight:300;
 color:#ffffff;
 background-color:#000000;  
}

如果我理解正确，<footer>，使用width: 100%;时看起来像<body>元素的宽度，所以我尝试了很多东西而没有。这是我在网页上的第一次尝试，所以有什么我可以做的，让<footer>使用整个页面宽度，而不是彻底改变一切？
我也尝试了很多人建议的东西，但似乎页脚左侧留有一些空间，当我手动尝试移动它时，似乎工作得太好了。
谢谢！

Answer 1

只需从身体边缘移除：15px; 填充：15px;页脚宽度可能是100％

Answer 2

页脚占用您身体宽度的100％。问题是body有一个margin和padding的默认值，你可以用这个设置为0：

body {
    margin: 0;
    padding: 0;
}

Answer 3

您知道浏览器会为body元素提供一些空白区域，您可以通过...

删除它

body {
margin:0px;
}

在此之后，你可以给导航栏一个100％的宽度，这应该删除空格。我想你的意思是这个？

Answer 4

你有15px的保证金和身体上的填充它必须是0，但不要删除保证金你仍然必须写0的保证金，因为默认它有一个保证金。

body {
    margin: 0;
}

Answer 5

#navBar{
 min-width:760px;
 width: 100%;
 float: left;
 position: absolute;
 top: 0;
 background-color: #000000;
 left: 0;
}

重新排列您的样式定义，将最小宽度设置为顶部或宽度：100％。

如何使页脚使用100％宽度的网页？

5 个答案: