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>标记来延长内容并在其下添加了一些文本。我想要的是，如果内容很短，请将页脚粘贴到页面底部（而不是内容在屏幕中间结束）;如果内容很长，则内容在内容之下结束。

我做错了什么/错过了什么？

Answer 1

好吧，如果您希望它始终保持在底部，您可以使用此代码。删除<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 2

无论你有多少文字，这都会将页脚发送到bage的底部：

.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 3

诀窍是在页脚的容器元素上使用position：relative，并在页脚上使用absolute：absolute将其实际推送到容器的末尾。位置：固定没有必要。

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

即使内容不够长，也会将页脚粘到底部

3 个答案: