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

确保首先正确设置了css，例如：

body {
    margin: 0;
}

然后你的页脚css应该是这样的：

.footer {
    margin: 0;
    width: 100%;
    height: 120px;
    background-color: red;
}

这应该很明显，那么你的html应该是这样的：

<html>
<body>
<div class="footer">
</div>
</body>
</html>

希望这有帮助！

Answer 2

JsFiddle

我为JSFiddle添加了额外的样式以进行演示和校对，但代码的工作原理与之相同。

这样做：

HTML

<body>
  <footer>Hi</footer>
</body>

CSS

html,body{
  width:100%;
  height:100%;
  marging:0;
}

footer{
  height:120px;
  width:100%;
  position:absolute;
  bottom:0;
}

Answer 3

有一个好的 full width 和 sticky to bottom （如果您需要）解决方案：

<div class="content">
    <!-- content here -->

    <div class="hfooter">
        <!-- For Content not to lay under the Footer -->
    </div>
</div>
<div class="footer">
    <!-- footer content here -->
</div>

和CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.content {
    height: 100%;
}
.hfooter {
    height: 100px;
}
.footer {
    height: 100px;
    margin-top: -100px;
}

希望这就是你所需要的）

DEMO ：http://jsfiddle.net/verber/63gbg/11/

Answer 4

块级元素

要了解此问题，您需要了解display：block。默认情况下，块级元素（声明display：block的元素）占用其包含元素的整个宽度。

在这种情况下，在所有新浏览器中，页脚是一个块级元素，因此将占据其容器的整个宽度，在本例中为主体。无需设置宽度：100％;

旧浏览器

在较旧的浏览器中，较新的HTML5元素（包括块）默认为内联，因此您需要将它们设置为CSS中的块级别，如下所示：

footer {
  display:block;
}

这是一种很好的做法。

浮筒

有几件事可能妨碍这种行为，特别是浮动。如果向左或向右浮动一个元素，它将变得尽可能窄，同时仍然包含它的内容。这可能是您的问题，也可能是您的问题。

请发布您的代码。

Answer 5

将页脚宽度设置为视口宽度width: 100vw;，并将视口元标记添加到标题中：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

如何使<footer>使用100％宽度的网页</footer>

5 个答案:

块级元素

旧浏览器

浮筒