Html 如何制作<；页脚>；使用100%的网页宽度_Html_Css_Footer

Html 如何制作<；页脚>；使用100%的网页宽度

html css

Html 如何制作<；页脚>；使用100%的网页宽度,html,css,footer,Html,Css,Footer,这是我的HTML： <body> <nav> <div id="navBar"> <ul> <li><a href="esileht.html">ESILEHT</a></li> <li><a href="uudised.html">UUDISED</a></li>

这是我的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>

如果我理解正确，使用

宽度时，
：100%

看起来像

元素的宽度，所以我尝试了很多方法，但什么也没有尝试。这是我第一次尝试使用网页，那么我能做些什么，让

使用整个页面宽度，而不会彻底改变所有内容吗？

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

body {
    margin: 0;
}

那么您的页脚css应该如下所示：

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

这应该很明显，然后您的html应该是：

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

希望这有帮助

我在JSFIDLE中添加了额外的样式用于表示和证明，但是代码在没有其他样式的情况下仍然可以工作

这样做：

HTML

有一个很好的全宽
和底部粘性
（如果需要）解决方案：

<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>

希望这就是你所需要的）

此处演示：

块级元素要了解此问题，您需要了解有关display:block的信息。默认情况下，块级元素（声明display:Block的元素）占据其包含元素的全部宽度

在本例中，在所有新浏览器中，页脚都是块级元素，因此将占据其容器（在本例中为主体）的全部宽度。无需设置宽度：100%

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

footer {
  display:block;
}

这是很好的做法

漂浮有几件事会阻碍这种行为，尤其是浮动。如果将一个元素向左或向右浮动，它将变得尽可能窄，同时仍然封闭其内容。这可能是你的问题，也可能是你的问题

请张贴您的代码。

将页脚宽度设置为视口宽度

宽度：100vw，并将视口元标记添加到标题：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


你的提琴不工作你的JSFIDLE链接不工作！阅读帮助中心关于提问的内容，也在此处发布您的代码-有助于避免所有上述评论。我的帖子，抱歉，已经离开了一段时间。为什么不使用元素本身？任何一个都是有效的HTML@Paulie_D：当然它也是有效的，但是为什么您更喜欢这样呢？我更喜欢使用类，因为在使用标记时遇到了问题。但正如@Paulie_D所说的，这两种HTML都是有效的……您在使用标签时遇到了问题？这将适用于在设备上查看响应性设计的情况。这是原始问题的意思吗？视口标记只能由移动设备读取。桌面浏览器将忽略它。此元标记用于触发响应性设计。我不同意你的看法。。它可以在桌面浏览器上工作，我用过好几次它为使用虚拟像素的设备设置初始缩放因子（收缩到缩放）。它在桌面浏览器上有什么可能的用途？
<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>

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

footer {
  display:block;
}

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