Question

我知道很多人已经问过，但似乎没有任何效果。我希望我的页脚位于页面底部。到目前为止，它位于屏幕的底部，但如果页面较大并且您需要滚动，它只会粘在那里并保持在中间。如果我把position: fixed页脚随你滚动。我希望它位于页面的非常底部，所以如果页面太大，你必须向下滚动才能看到它。

我尝试了几种不同的包装和推动器，但似乎没有任何效果。

Answer 1

你可以尝试这个，希望这会对你有所帮助

删除pageimg类和内容类的min-height，然后您将获得输出。

.pagelist {
  background-color: deeppink;
  position: relative;
  float: right;
  width: 20%;
  height: 70%;
  overflow-y: scroll;
  margin-right: 10px;
}

.pageimg {
  position: relative;
  float: left;
  width: 100%;
  /* min-height: 500px; */
  text-align: center;
  display: flex;
  align-items: center;
}

.pageimg img {
  margin: 0 auto;
}

.pagetext {
  position: relative;
  float: left;
  margin-top: 1%;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.pageframe {
  position: absolute;
  width: 75%;
  margin-left: 10px;
  text-align: center;
}

.comiclist {
  background-color: lightgrey;
  padding-left: 5px;
  width: 90%;
}

.floatbutt-right {
  float: right;
}

.floatbutt-left {
  float: left
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 30px;
  background-color: lightgrey;
  font-size: 12px;
  color: grey;
}

.footer span {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.spacer {
  width: 100%;
  height: 95px;
}

.content {
  width: 100%;
  margin-bottom: -30px;
  /* Footer */
}

<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
                        <img src='komix\19_03_18_10_21_31-12.jpg'
                        alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
        <span>text</span>
</div>

Answer 2

您应该过度思考布局并阅读HTML框模型。

我将所有元素放在 position：relative 的包装中，因此 position：absolute 的页脚可以正确对齐。此外，我必须删除 .pageframe 的位置：绝对：

.pagelist {
  background-color: deeppink;
  position: relative;
  float: right;
  width: 20%;
  height: 70%;
  overflow-y: scroll;
  margin-right: 10px;
}

.pageimg {
  position: relative;
  float: left;
  width: 100%;
  min-height: 500px;
  text-align: center;
  display: flex;
  align-items: center;
}

.pageimg img {
  margin: 0 auto;
}

.pagetext {
  position: relative;
  float: left;
  margin-top: 1%;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.pageframe {
  /* position: absolute; */ 
  width: 75%;
  margin-left: 10px;
  text-align: center;
}

.comiclist {
  background-color: lightgrey;
  padding-left: 5px;
  width: 90%;
}

.floatbutt-right {
  float: right;
}

.floatbutt-left {
  float: left
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 30px;
  background-color: lightgrey;
  font-size: 12px;
  color: grey;
}

.footer span {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.spacer {
  width: 100%;
  height: 95px;
}

.content {
  height: 100%;
  width: 100%;
  margin-bottom: -30px;
  /* Footer */
}

#wrapper {
  min-width: 100%;
  min-height: 100%;
  display:inline-block;
  position:relative;
}

<head lang="de">
  <link rel="stylesheet" href="inc/layout.css">
  <script src="inc/javascript.js"></script>
  <meta charset="UTF-8" />
  <title>komix.lit</title>
</head>

<body>
<div id="wrapper">
  <div id="navbar">
    <img class="logo" src="inc/logo.png" /> komix.lit
    <button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
    <button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
    <button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
  <div class="content">
    <div class="spacer"></div>
    <div class="pagelist">
      <ul style="list-style-type: none;">
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
      </ul>
    </div>
    <div class='pageframe'>
      <div class='pageimg' style='height: 1024;'>
        <img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
      <div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
  </div>
  <div class="footer">
    <span>text</span>
  </div>
</div>
</body>

</html>

在页面底部HTML页脚

2 个答案: