使主体有100%的浏览器高度

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

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

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

当前回答

这里更新

html
  {
    height:100%;
  }

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

2018-06-04 06:56:05

其他回答

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

2011-07-11 18:54:28

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

body{ height: 100vh; }

2016-06-23 07:02:54

尝试将html元素的高度设置为100%。

html, 
body {
    height: 100%;
}

主体通过其父(HTML)查看如何缩放动态属性，因此HTML元素也需要设置它的高度。

然而，body的内容可能需要动态更改。将min-height设置为100%将实现这一目标。

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

2011-07-11 18:53:54

如果需要，你也可以使用JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

2016-11-28 15:04:09

Try

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2016-01-20 18:52:48

使主体有100%的浏览器高度

推荐文章

最新文章

标签