100% Min Height CSS layout

2019-01-03 04:10发布

站内问答 / HTML/CSS
1026 13 5

What's the best way to make an element of 100% minimum height across a wide range of browsers ? In particular if you have a layout with a header and footer of fixed height how do you make the middle content part fill 100% of the space in between with the footer fixed to the bottom ?

标签： html css xhtml
举报
13条回答
We Are One
2楼-- · 2019-01-03 04:52

Probably the shortest solution (works only in modern browsers)

This small piece of CSS makes "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

the only requirement is that you need to have a fixed height footer.

For example for this layout:

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

you need this CSS:

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)