您可以使用flexbox auto margins

Question

我还没有向我的网页添加内容，因为我还在处理页眉和页脚。我注意到我的页脚，而不是位于页面底部，就像页面较高一样，它位于页面中间，位于页眉的正下方。

我知道这应该是CSS中应该发生的事情，但是如何让它走到尽头？我尝试position: fixed; bottom: 0px;，但它会进入底部，当我添加更多内容时，它会重叠或位于内容之下。

编辑：我需要页脚可调高度。换句话说，我不能使用height: 100px;或其他任何东西。另外，如果内容大于页面大小，我也不希望页脚粘在屏幕底部。如果屏幕高度为720px，页面为1200px，则页脚不应位于屏幕底部。它应位于页面底部，不在视野范围内。

如何解决此问题？我想不使用JavaScript 。

这是我当前的页面。我的页脚不是固定的高度，我不能使用需要它的解决方案。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body
            {
                font-family: Lato;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
            header
            {
                height: 80px;
                padding-left: 20px;
                padding-right: 5px;
                padding-top: 15px;
            }
            header h1
            {
                display: inline;
            }
            header nav
            {
                float: right;
                font-size: 18pt;
            }
            header nav a
            {
                color: #999;
                line-height: 50px;
                margin-right: 20px;
                text-decoration: none;
            }
            header nav a:hover
            {
                color: #666;
            }
            header nav a.currentPage
            {
                color: #7a7acc;
            }
            header nav a.currentPage:hover
            {
                color: #7a7acc;
            }
            footer
            {
                background-color: #f2f2f2;
                color: #666;
                font-size: 12pt;
                padding: 20px;
                text-align: center;
            }
            footer div
            {
                max-width: 750px;
                margin: 0px auto;
            }
            footer a
            {
                color: #666;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>
                <img src="logo.png" />
            </h1>
            <nav>
                <a href="/" class="currentPage">Home</a>
                <a href="/services">Services</a>
                <a href="/news">News</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>
        <footer>
            <div>
                <p>Footer text. Footer text. Footer text.</p>
            </div>
        </footer>
    </body>
</html>

Answer 1

使用css表：

FIDDLE1 - 内容很少

FIDDLE2 - 少量内容+大页脚

FIDDLE3 - 大量内容

标记

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}

Answer 2

这是因为你的内容没有任何东西，所以页脚会上升。

我在这里有解决方案如果您的结构是这样的

HTML

<header> header content goes here    </header>
<div class="container"> main content </div>
<footer> footer part </footer>

CSS

header { // header definitions  }
.container { 
       min-height: 500px;
       // other definitions  
}
footer { // footer definitions  }

即使内容为空，这也会将您的页脚粘贴在500px内容之下。

Answer 3

几个星期前我在使用我正在处理的网站时遇到了同样的问题，经过一些搜索和试错工作后，我设法找到解决此问题的方法。

我这里有代码，因为它有点难以解释：

<强> HTML：

<header>
    some header<br />
</header>
<section>
    <!-- no content -->

    <!-- little content -->
    <div id="little-content">some content</div>
    <!-- a lot of content -->
    <div id="lotsa-content">some more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more content</div>
</section>
<footer>
    &copy; some footer
</footer>

<强> CSS：

html,
body {
    margin: 0;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

header,
footer {
    background: red;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
}

section {
    margin: 1.3em 0;
}

#little-content {
    display: none;
}

#lotsa-content {
    display: none;
}

footer {
    bottom: 0;
}

这是我为你制作的 JSFiddle 。

我希望这会有所帮助。

<强> EDIT1：

更具体地回答您的问题：您必须将位置设为页脚的父级（我认为它是正文）绝对和给它最小高度 100％（也是宽度），页脚的位置相同（位置：绝对; ）并且还用底部：0; 将其粘贴到底部，最后一件事是提供底部边距页脚高度以便它不会重叠（由于我也将标题设置为绝对值，因此我也给出了一个上边距）。

<强> EDIT2：

以下是您提供的代码的 JSFiddle 示例。

Answer 4

您可以使用flexbox auto margins

最小示例：

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

使用与上面相同的最小示例，但内容很长：

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

div {
  height: 3000px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

使用OP的代码：

body {
  font-family: Lato;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

header {
  height: 80px;
  padding-left: 20px;
  padding-right: 5px;
  padding-top: 15px;
}

header h1 {
  display: inline;
}

header nav {
  float: right;
  font-size: 18pt;
}

header nav a {
  color: #999;
  line-height: 50px;
  margin-right: 20px;
  text-decoration: none;
}

header nav a:hover {
  color: #666;
}

header nav a.currentPage {
  color: #7a7acc;
}

header nav a.currentPage:hover {
  color: #7a7acc;
}

footer {
  margin-top: auto;
  background-color: #f2f2f2;
  color: #666;
  font-size: 12pt;
  padding: 20px;
  text-align: center;
}

footer div {
  max-width: 750px;
  margin: 0px auto;
}

footer a {
  color: #666;
}

<!DOCTYPE html>
<html>

<body>
  <header>
    <h1>
      <img src="logo.png" />
    </h1>
    <nav>
      <a href="/" class="currentPage">Home</a>
      <a href="/services">Services</a>
      <a href="/news">News</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <footer>
    <div>
      <p>Footer text. Footer text. Footer text.</p>
    </div>
  </footer>
</body>

</html>

即使页面内容小于屏幕，如何使我的页脚始终保持在页面底部？

4 个答案:

标记

CSS

您可以使用flexbox auto margins