即使内容不够长也将页脚贴在底部

Question

我正在尝试将页脚移至底部，如果内容不够长，则将其推至屏幕底部。我读到它只能通过使用 css 来实现，但是我无法实现它。

我尝试创建列，

<body>
   <div id="wrapper">
       <nav class="navbar navbar-default" role="navigation">
           ...
       </nav>

       <div id="content">
          ...
       </div>

       <div id="footer">
          ...
       </div>
  </div>
</body>

然后，在我的 css 中，我尝试使用：

#footer {
    height: 30px;
    width:100%;
    background-color: #2D2D2D;
    position: absolute;
    left: 0;
    bottom: 0;
}

#wrapper {
    background-color: purple;
    position: absolute;
    top: 0px; 
    bottom: 0px;
    width: 100%;
}

但运气不好 :/

这里是我在 bootply 中创建的。在这里，我添加了一堆 <br> 标签来加长内容，并在下面添加了一些文本。我想要的是，如果内容很短，则将页脚贴在页面底部（而不是内容在屏幕中间结束的地方）；如果内容很长，内容就在内容下方结束。

我在wrong/missing外面干什么？

Answer 1

无论您有多少文本，这都会将页脚发送到底部：

.footer {   background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ } 

html, body {
height: 100%; } 

.wrapper {   background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; } 

.footer, .push {
30px; } 

.navbar {
background-color: red   }

好的，很抱歉造成误会，现在已修复：http://www.bootply.com/N3XiwwGr9q#

Answer 2

好吧，如果你想让它一直在底部，你可以使用这段代码。再次删除 <p> 标签和运行以在没有文本

的情况下进行测试

html,body {
  height: 100%;
margin: 0;
padding: 0;
 }
 #wrapper {
  min-height: 100%;
  position: relative;
  padding-bottom: 5em;
        box-sizing: border-box;
 }
    #content {
      background: red;
      }
 footer {
  height: 4em;
  background: blue;
  position: absolute; 
  bottom: 0;
  left: 0;
  right: 0;
 }

<body>
<div id="wrapper">
  <div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>


  </div>
    <footer>This is a footer</footer>
</div>

</body>

Answer 3

诀窍是在页脚的容器元素上使用 position:relative 并在页脚上使用 position:absolute 以实际将其推到容器的末尾。 Position: fixed 不需要。

https://codepen.io/cbracco/pen/zekgx

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

此示例对整个页面上的容器元素执行相同的操作，而不是对 html 和 body 标记进行操作。

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

即使内容不够长也将页脚贴在底部

Sticking footer to bottom even if content is not long enough

html

css

footer