我想让主体有100%的浏览器高度。我可以用CSS来做吗?

我试着设置高度:100%,但它不起作用。

我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。


当前回答

对于真正的纯粹主义者来说,这种方法尊重浏览器的默认边距,并防止由其他方法产生的不需要的滚动,除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……

html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }

其他回答

如果你有一个背景图像,那么你会想要设置这个:

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

这可以确保当内容比视口高时,body标签可以继续增长,并且当你开始向下滚动时,背景图像会继续重复/滚动/等等。

记住,如果你必须支持IE6,你需要找到一种楔子在高度:100%的身体,IE6对待高度像最小高度。

只需要一行CSS就可以完成。

body{ height: 100vh; }

在这里:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

这里更新

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

我会用这个

html,身体{ 背景:#药剂; 最小高度:100%; 最小高度:100 vh; 溢出:汽车;// <-当你调整屏幕大小时,这是需要的 } < html > 身体< > < /身体> < / html >

浏览器将使用min-height: 100vh,如果浏览器有点旧,则min-height: 100%将作为备用。

溢出:auto是必要的,如果你想要身体和html扩大他们的高度当你调整屏幕的大小(例如移动大小)