强制页脚留在页面底部

问题描述 投票：3回答：3

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

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

UPDATE

我删除了CSS

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

并补充说

display: relative;

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

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

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

#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;
}
<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>

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

html css footer
3个回答
3
投票

添加此CSS：

body {
  position: relative;
}

还要为你的.footer类添加两个CSS道具。所以你的.footer CSS会像：

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

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

1
投票

从.footer css中删除以下代码

position: fixed;
bottom: 0;
left: 0;
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}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.