使主体具有浏览器高度的 100% [英] Make body have 100% of the browser height

问题描述

我想让 body 具有浏览器高度的 100%.我可以使用 CSS 来做到这一点吗?

I want to make body have 100% of the browser height. Can I do that using CSS?

我尝试设置height: 100%，但它不起作用.

I tried setting height: 100%, but it doesn't work.

我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个难看的白条.

I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.

推荐答案

同样尝试将 html 元素的高度设置为 100%.

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body 查看其父元素 (HTML) 以了解如何缩放动态属性，因此 HTML 元素也需要设置其高度.

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

但是 body 的内容可能需要动态更改.将 min-height 设置为 100% 将实现此目标.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

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

这篇关于使主体具有浏览器高度的 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！