将内容高度设置为身高的100％

我试图将我的页脚推到页面的底部，而不管页面上的内容有多少或多少。我的大部分网页都将它推到最底部没什么问题，但内容较少的网页在页面中间有一个浮动页脚。即使我有将内容高度设置为身高的100％

html,body{height:100%}

时

#content{height:100%}

设置内容部分不会获得高度。我搞砸了

clear:both 
overflow:hidden 
#content:after{}

无济于事。

<html> 
<body> 
<header> 
    <h1>Header Name</h1> 
</header> 

<section id="content"> 
     <p>Temp Text</p> 
</section> 

<section id="footer"> 
    <footer> 
     <p>All rights reserved</p> 
    </footer> 
</section> 
</body> 
</html>

编辑：使用视口高度（VH）单元具有让我延伸内容部分的高度，而是由上述头实现。因此，如果我的视口900px，200px标题，我的页脚被推到视口下方200px。

来源

2016-08-14 Chris

你可以找到答案在这些问题中的任何一个，其中大部分都是重复的[footer stick]（http://stackoverflow.com/search?q=footer+stick）...就像你的。 – Jayx

[你如何让页脚停留在网页底部？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay在网页的底部） – Jayx

@Jayx我已经尝试过每个类似的帖子在本网站和它的外部（包括你链接的），并没有找到合适的解决方案。 – Chris

CSS

#content{ 
    min-height: 100vh; 
}

这里是工作Demo

这总会给全view-height的最低高度，无论内容

编辑的大小（用于制作页脚如果内容很小，则不显示滚动可见）

body{ 
 
\t min-height: 100vh; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 
#content{ 
 
\t flex: 1; 
 
}

<section id="content"> 
 
     <p>Temp Text</p> 
 
</section> 
 

 
<section id="footer"> 
 
    <footer> 
 
     <p>All rights reserved</p> 
 
    </footer> 
 
</section>

这里是Editted Demo

如果含量小，页脚将驻留在视图端口的底部。如果其含量大于屏幕高度较大，那么页脚下去

来源

2016-08-14 17:43:10

Holy＆*％$！这是最简单的，修复！我完全忘记了视口单元！ – Chris

好吧，它是否必须强制页脚离开页面？如果页面下半部分没有内容，我希望页脚停留在页面底部，而不必向下滚动才能看到它。 – Chris

好的与JavaScript？ –

设置页脚绝对：

html,body{min-height:100%;} 

#footer { 
    position:absolute; 
    bottom:0; 
}

Codepen：https://codepen.io/anon/pen/vKbREk

来源

2016-08-14 17:44:50

我不认为这会在#content部分中使用更多内容。您已将页脚设置为绝对位置，页脚将会漂浮在其他元素上。 https://codepen.io/anon/pen/GqzxJO –

将内容高度设置为身高的100％

回答

相关问题