Question

我的页面分为3个部分。 header main和footer header。

109px固定在顶部，6px的边框高度为main，因此109px的边距为main。

我希望footer扩展到标题下方的整个页面和页脚，如果没有可用于推送它的内容，则应该停留在屏幕的底部。

86px为80px高，因为顶部边框为6px和footer。 main显示在底部，footer会延伸，但如果页面长于页面，则footer不会被推下。

如果main的内容增加，我该怎么做才能将html { height: 100%; box-sizing: border-box; } body { background-color: #f5f5f5; margin: 0; padding: 0; position: relative; height: 100%; } /* ---------------------------------------------------------------- */ main { padding-top: 120px; /* eigendlich 109px */ padding-bottom: 150px; /* eigendlich 86px */ text-align: center; } #all { height: 100%; } #header { background-color: #25211e; border-bottom: 6px solid #1d1a18; text-align: center; position: fixed; left: 0; top: 0; width: 100%; height: 103px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 99; } #heading { font-family: "titlefont"; color: #c1b497; font-size: 45px; display: inline-block; margin-bottom: 10px; margin-top: 15px; } #footer { background-color: #25211e; border-top: 6px solid #1d1a18; text-align: center; position: absolute; right: 0; bottom: 0; left: 0; height: 80px; z-index: 98; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } #credit { font-family: "Helvetica"; font-size: 14px; color: #c1b497; font-weight: 600; }保持在最底层？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>
</body>

</html>

existUserStoryRequest.setProject("/project/" + projectOID);

Answer 1

你可以改变

 position: fixed;

在#footer CSS

中

＆＃13;

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}


/* ---------------------------------------------------------------- */



#all {
  height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}
main {
  padding-top: 120px;
  /* eigendlich 109px  */
  padding-bottom: 150px;
  /* eigendlich 86px  */
  text-align: center;
}
#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

＆＃13;

  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>

＆＃13;

Answer 2

您需要将height: 100%添加到#main

main {
  padding-top: 120px;
  padding-bottom: 150px;
  text-align: center;
  height: 100%;
}

Answer 3

您可以尝试使用flexbox粘性页脚！

＆＃13;

body {
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    height: 40px;
    background-color: lightgray;
}

main {
    flex: 1 0 auto;
}

＆＃13;

<div class="wrapper">
    <header><span>header</span></header>
    <main><span>main content</span></main>
    <footer><span>footer</span></footer>
</div>

＆＃13;

Answer 4

让body代码设为min-height: 100%并删除height。你需要改变什么：

body {
    /* height: 100%; */ Delete
    min-height: 100%;
}

以下是代码段中的所有代码：

＆＃13;

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}


/* ---------------------------------------------------------------- */

main {
  padding-top: 120px;
  /* eigendlich 109px  */
  padding-bottom: 150px;
  /* eigendlich 86px  */
  text-align: center;
}

#all {
  height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

＆＃13;

<body>
  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>
</body>

＆＃13;

Answer 5

删除所有设置高度，但在页眉和页脚上，从页脚中删除绝对位置，并使用视口单位vh作为main上的高度，结合CSS Calc，你很高兴去

我还将overflow: hidden添加到main以弥补由h1和box-sizing: border-box引起的折叠边距，以便填充包含在设置宽度中。< / p>

html, body {
  margin: 0;
}
body {
  background-color: #f5f5f5;
}


/* ---------------------------------------------------------------- */

main {
  min-height: calc(100vh - 86px);
  padding-top: 109px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="main">
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
  </main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>

Answer 6

我通过改变元素的顺序来创建一个解决方案，如果这是可以接受的。

我删除了<div id="all">并在<header>内添加了<footer>和<main>。 <main>有min-height: 100%和padding-top以及padding-bottom来容纳<header>和<footer>。 <header>固定在顶部，<footer>位于<main>底部的绝对位置。

因此：

当内容小于窗口大小<main>有min-height: 100%时，<header>固定在顶部，<footer>位于其绝对定位的底部
当内容大于窗口大小<main>时min-height: 100%因此可以扩展到窗口大小以上，<header>固定在顶部，<footer>敌人位于底部位于<main>内容

<main>

＆＃13;

html {
  height: 100%;
}

body {
  background-color: #f5f5f5;
  min-height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}


/* ---------------------------------------------------------------- */

main {
  box-sizing: border-box;
  padding-top: 120px;
  padding-bottom: 110px;
  text-align: center;
  min-height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <script src="script.js"></script>
</head>

<body>
    <main id="main">
      <header id="header">
        <h1 id="heading">My Page</h1>
      </header>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <footer id="footer">
        <p id="credit">FOOTER</p>
      </footer>
    </main>
</body>

</html>

＆＃13;

Answer 7

将position: absolute;更改为position: fixed;，应该修复它。

#footer div现在应该是这样的;

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

点击此处查看实际操作：JSfiddle DEMO。

页脚不会到底

7 个答案: