强制页脚留在页面底部

时间：2018-04-07 16:04:12

标签： html css footer

目前，我在视点的底部有一个页脚，但我希望它位于网页的底部。我喜欢这样，因为它覆盖了每个页面上的大部分内容。如何更改以下HTML和CSS来解决此问题？

＆＃13;
＆＃13; 
body {
    background-color: #40E39C;
    }
#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }
#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}
#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }  
.footer {
    background-color: #EAEDD0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    }
.footer li {
    display: inline-block;
}
.footer ul {
    text-align: center;
}
＆＃13; 
<body>
    <div id="nav-menu">
        <ul>
            <li><a href="./a.php">A</a></li>
            <li><a href="./b.php">B</a></li>
            <li><a href="./c.php">C</a></li>
            <li><a href="./d.php">D</a></li>
            <li><a href="./e.php">E</a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
    </div>
    <footer class="footer">
        <ul>
            <li><a href="./a.php">A | </a></li>
            <li><a href="./b.php">B | </a></li>
            <li><a href="./c.php">C | </a></li>
            <li><a href="./d.php">D | </a></li>
            <li><a href="./e.php">E | </a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
</footer>
</body>
＆＃13;
＆＃13;
＆＃13;

更新

我已删除了CSS 

position: fixed;
bottom: 0;
left: 0;

并添加了

display: relative;

到body标签，但页脚底部与页面之间仍有一些空间。

＆＃13;
＆＃13; 
body {
  background-color: #40E39C;
  position: relative;
}

#nav-menu a {
  text-align: center;
  padding: 30px 45px 30px 45px;
}

#nav-menu ul {
  margin-bottom: 100px;
  text-align: center;
}

#nav-menu li {
  display: inline-block;
  margin-top: 40px;
  border-style: solid;
  border-width: 1px;
  background-color: white;
  padding: 30px 45px 30px 45px;
}

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.footer li {
  display: inline-block;
}

.footer ul {
  text-align: center;
}
＆＃13; 
<body>
  <div id="nav-menu">
    <ul>
      <li><a href="./a.php">A</a></li>
      <li><a href="./b.php">B</a></li>
      <li><a href="./c.php">C</a></li>
      <li><a href="./d.php">D</a></li>
      <li><a href="./e.php">E</a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </div>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  <p>a<p/><p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  v
  v<p>a<p/><p>a<p/><p>a<p/>
  <footer class="footer">
    <ul>
      <li><a href="./a.php">A | </a></li>
      <li><a href="./b.php">B | </a></li>
      <li><a href="./c.php">C | </a></li>
      <li><a href="./d.php">D | </a></li>
      <li><a href="./e.php">E | </a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </footer>
</body>
＆＃13;
＆＃13;
＆＃13;

也许这可能会有所帮助 这是我的画廊页面。我希望你能用这个更轻松地找到问题。

＆＃13;
＆＃13; 
#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }

#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}

#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }
    
.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
    }

.footer li {
    display: inline-block;
}

.footer ul {
    text-align: center;
    margin: 0;
}
＆＃13; 
<body>
    <head>
        <link rel="stylesheet" href="styles.css" type="text/css"/>
    </head>
    <div id="nav-menu">
    <ul>
        <li><a href="./a.php">A</a></li>
        <li><a href="./b.php">B</a></li>
        <li><a href="./c.php">C</a></li>
        <li><a href="./d.php">D</a></li>
        <li><a href="./e.php">E</a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom1.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom2.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom3.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom4.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom5.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom6.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <footer class="footer">
    <ul>
        <li><a href="./a.php">A | </a></li>
        <li><a href="./b.php">B | </a></li>
        <li><a href="./c.php">C | </a></li>
        <li><a href="./d.php">D | </a></li>
        <li><a href="./e.php">E | </a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </footer>

</body>
＆＃13;
＆＃13;
＆＃13;

尝试修复的代码片段。 https://i.stack.imgur.com/5XV62.png

3 个答案:

答案 0 :(得分：3)

添加此CSS：

body {
  position: relative;
}

还要为您的.footer课程添加两个CSS道具。所以你的.footer CSS就像：

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

这是有效的，因为我已经在代码片段中检查了它。

答案 1 :(得分：1)

从.footer css

中删除以下代码 
position: fixed;
bottom: 0;
left: 0;

答案 2 :(得分：0)

从position:fixed移除.footer，同时删除不必要的左下角等。页脚的最终样式为：

.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
}

更新clearfix和Unwanted Margin

问题不在于我们的解决方案。在你的代码中，有另外两个原因阻止你获得预期的结果。你没有在正确的位置使用clearfix，并且身体上有一些小的边距导致空间。 clearfix的解决方案如下：

div:after{
    content: "";
    display: table;
    clear: both;
}

你应该把这些风格给予每个有孩子左右浮动的父母。

当我在body找到浏览器给定的保证金时，修复就是：

body{margin: 0}
相关问题
最新问题