html - 如何使用溢出 :hidden;? 将页脚强制到包装器的底部

标签 html css

我正在制作带有 overflow:hidden; 的包装器、带有 float:left; 的导航栏、内容和页脚的网页。我在导航栏中添加了填充,这样它的背景颜色就可以到达包装器的末尾,并将包装器设置为 overflow:hidden; 这样它就会展开以匹配导航栏。问题是我无法让页脚到达底部。

CSS

#nav{
    background:skyblue;
    padding:8px 8px 350px 8px;
    font-weight:bold;
    float:left;}

#wrapper{
    width:80%;
    min-width:960px;
    background:#90C7E3;
    box-shadow: 8px 8px 8px gray;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;}

#footer{
    font-size:75%;}

html

  <body>
    <div id="wrapper">
      <div id="nav">
        <ul>
          <li><a href="home.html">H</a>
          <li><a href="a.html">A</a>
          <li><a href="b.html">B</a>
          <li><a href="c.html">C</a>
         </ul>
       </div>
       <div id="content">
         <h2>content</h2>     
         <p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
       </div>
       <div id="footer">
         <p>footerfooterfooterfooterfooter<br>
         <em>footerfooterfooter</em></p>
       </div>
     </div>
  </body>

我不确定我是否正确发布了代码,因为这是我第一次在此网站上发布。

最佳答案

在页脚中使用 clear:both。

My fiddle

  #footer{
 font-size:75%;
clear:both;}

关于html - 如何使用溢出 :hidden;? 将页脚强制到包装器的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23004990/

相关文章:

javascript - 如何使用 Javascript 根据元素的颜色更改 ID

html - 使用django的div中的不同链接

javascript - Android中文本的自动垂直滚动

javascript - 选择输入类型编号中的所有输入值

html - 如何用html和css自定义滚动条

javascript - 对文本元素 react native 样式

android - 三星浏览器上的元素大小错误

javascript - 如何在jquery中改变宽度

css - 从谷歌网络字体或从自己的服务器加载字体,哪一个在页面加载时间方面更有效?

html - 很难找到遵循路径的方法