发表新帖
发表新帖

Make body have 100% of the browser height

后端 未结
关注
21 1366
离开以前
离开以前 2020-11-22 00:26

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

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

I want to set

相关标签:
21条回答
  • 时光说笑
    2020-11-22 00:44

    You can also use JS if needed

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
    0 讨论(0)
  • 小鲜肉
    2020-11-22 00:46

    Try

    <html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
    0 讨论(0)
  • 我在风中等你
    2020-11-22 00:48 
    html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
    0 讨论(0)
  • 醉酒成梦
    2020-11-22 00:49

    About the extra space at the bottom: is your page an ASP.NET application? If so, there is probably a wrapping almost everything in your markup. Don't forget to style the form as well. Adding overflow:hidden; to the form might remove the extra space at the bottom.

    0 讨论(0)
  • 你的背包
    2020-11-22 00:52

    If you want to keep the margins on the body and don't want scroll bars, use the following css:

    html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

    Setting body {min-height:100%} will give you scroll bars.

    See demo at http://jsbin.com/aCaDahEK/2/edit?html,output .

    0 讨论(0)
  • 自闭症患者
    2020-11-22 00:53

    If you don't want the work of editing your own CSS file and define the height rules by yourself, the most typical CSS frameworks also solve this issue with the body element filling the entirety of the page, among other issues, at ease with multiple sizes of viewports.

    For example, Tacit CSS framework solves this issue out of the box, where you don't need to define any CSS rules and classes and you just include the CSS file in your HTML.

    0 讨论(0)
 看不清?
提交回复
热议问题