笑故挽风
2011-07-11 18:50
采纳率: 14.3%
浏览 749

让主体的浏览器高度为100%

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 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.

转载于:https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

21条回答 默认 最新

  • 妄徒之命 2011-07-11 18:53
    已采纳

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

    html, 
    body {
        height: 100%;
    }
    

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

    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%;
    }
    
    点赞 打赏 评论
  • 程序go 2011-07-11 18:54
    html, body
    {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    点赞 打赏 评论
  • bug^君 2011-07-11 18:56

    Here:

    html,body{
        height:100%;
    }
    
    body{
      margin:0;
      padding:0
      background:blue;
    }
    
    点赞 打赏 评论
  • 斗士狗 2012-11-01 06:55

    If you have a background image then you will want to set this instead:

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

    This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down.

    Remember if you have to support IE6 you will need to find a way to wedge in height:100% for body, IE6 treats height like min-height anyway.

    点赞 打赏 评论
  • lrony* 2013-04-11 20:58

    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.

    点赞 打赏 评论
  • perhaps? 2013-12-01 08:24

    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 .

    点赞 打赏 评论
  • Lotus@ 2014-02-26 10:35
    @media all {
    * {
        margin: 0;
        padding: 0;
    }
    
    html, body {
        width: 100%;
        height: 100%;
    } }
    
    点赞 打赏 评论
  • As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths.

    5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

    The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

    In this instance, you could use the value 100vh - which is the height of the viewport.

    Example Here

    body {
        height: 100vh;
    }
    
    body {
        min-height: 100vh;
    }
    

    This is supported in most modern browsers - support can be found here.

    点赞 打赏 评论
  • hurriedly% 2015-03-25 08:16
    html {
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-height: 100%;
    }
    html body {
        min-height: 100%
    }
    

    Works for all major browsers: FF, Chrome, Opera, IE9+. Works with Background images and gradients. Scrollbars are available as content needs.

    点赞 打赏 评论
  • 零零乙 2015-05-25 05:04

    CSS3 has a new method.

     height:100vh
    

    It makes ViewPort 100% equal to the height.

    So your Code should be

     body{
     height:100vh; 
     }
    
    点赞 打赏 评论
  • Memor.の 2015-08-03 22:49

    A quick update

    html, body{
        min-height:100%;
        overflow:auto;
    }
    

    A better solution with today's CSS

    html, body{ 
      min-height: 100vh;
      overflow: auto;
    }
    
    点赞 打赏 评论
  • 笑故挽风 2015-10-28 02:32

    What I use on the start of literally every CSS file I use is the following:

    html, body{
        margin: 0;
    
        padding: 0;
    
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    
        min-height: 100%;
        height: 100%;
        max-height: 100%;
    }
    

    The margin of 0 ensures that the HTML and BODY elements aren't being auto-positioned by the browser to have some space to the left or right of them.

    The padding of 0 ensures that the HTML and BODY elements aren't automatically pushing everything inside them down or right because of browser defaults.

    The width and height variants are set to 100% to ensure that the browser doesn't resize them in anticipation of actually having an auto-set margin or padding, with min and max set just in case some weird, unexplainable stuff happens, though you probably dont need them.

    This solution also means that, like I did when I first started on HTML and CSS several years ago, you won't have to give your first <div> a margin:-8px; to make it fit in the corner of the browser window.


    Before I posted, I looked at my other fullscreen CSS project and found that all I used there was just body{margin:0;} and nothing else, which has worked fine over the 2 years I've been working on it.

    Hope this detailed answer helps, and I feel your pain. In my eyes, it is dumb that browsers should set an invisible boundary on the left and sometimes top side of the body/html elements.

    点赞 打赏 评论
  • 北城已荒凉 2016-01-20 18:52

    Try

    <html style="width:100%; height:100%; margin: 0; padding: 0;">
    <body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
    
    点赞 打赏 评论
  • Didn"t forge 2016-06-23 07:02

    Only with 1 line of CSS… You can get this done.

    body{ height: 100vh; }
    
    点赞 打赏 评论
  • 撒拉嘿哟木头 2016-08-12 00:58

    After testing various scenarios, I believe this is the best solution:

    html {
        width:100%;
        height: 100%;
        display: table;
    }
    
    body {
        width:100%;
        display:table-cell;
    }
    
    html, body {
        margin: 0px;
        padding: 0px;
    }
    

    It is dynamic in that the html and the body element will expand automatically if their contents overflow. I tested this in the latest version of Firefox, Chrome, and IE 11.

    See the full fiddle here (for you table haters out there, you can always change it to use a div):

    https://jsfiddle.net/71yp4rh1/9/


    With that being said, there are several issues with the answers posted here.

    html, body {
        height: 100%;
    }
    

    Using the above CSS will cause the html and the body element to NOT automatically expand if their contents overflow as shown here:

    https://jsfiddle.net/9vyy620m/4/

    As you scroll, notice the repeating background? This is happening because the body element's height has NOT increased due to its child table overflowing. Why doesn't it expand like any other block element? I'm not sure. I think browsers handle this incorrectly.

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

    Setting a min-height of 100% on the body as shown above causes other problems. If you do this, you cannot specify that a child div or table take up a percentage height as shown here:

    https://jsfiddle.net/aq74v2v7/4/

    Hope this helps someone. I think browsers are handling this incorrectly. I would expect the body's height to automatically adjust growing larger if its children overflow. However, that doesn't seem to happen when you use 100% height and 100% width.

    点赞 打赏 评论
  • 撒拉嘿哟木头 2016-10-26 19:14

    Please check this:

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

    Or try new method Viewport height :

    html, body { width: 100vw; height: 100vh;}
    

    Viewport: If your using viewport means whatever size screen content will come full height fo the screen.

    点赞 打赏 评论
  • 撒拉嘿哟木头 2016-11-28 15:04

    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)
    }
    
    点赞 打赏 评论
  • python小菜 2017-12-19 06:48

    all answers are 100% correct and well explained, but i did something good and very simple to make it responsive.

    here the element will take 100% height of view port but when it comes to mobile view it don't look good specially on portrait view ( mobile ), so when view port is getting smaller the element will collapse and overlap on each other. so to make it little responsive here is code. hope someone will get help from this.

    <style>
    .img_wrap{
          width:100%;
          background: #777;
    }
    .img_wrap img{
          display: block;  
          width: 100px;
          height: 100px;
          padding: 50px 0px;
          margin: 0 auto;
    }
    .img_wrap img:nth-child(2){
          padding-top: 0;
    }
    </style>
    
    <div class="img_wrap">
      <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
      <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
    </div>
    
    <script>
       var windowHeight = $(window).height();
       var elementHeight = $('.img_wrap').height();
    
       if( elementHeight > windowHeight ){
           $('.img_wrap').css({height:elementHeight});
       }else{
           $('.img_wrap').css({height:windowHeight});
       }
    </script>
    

    here is JSfiddle Demo.

    点赞 打赏 评论
  • 零零乙 2018-03-24 09:59

    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.

    点赞 打赏 评论
  • MAO-EYE 2018-06-04 06:56

    Here Update

    html
      {
        height:100%;
      }
    
    body{
         min-height: 100%;
         position:absolute;
         margin:0;
         padding:0; 
    }
    
    点赞 打赏 评论
  • Try adding:

    body {
    height: 100vh;
    }
    
    点赞 打赏 评论

相关推荐 更多相似问题