设置高度100％为HTML和正文

我在设置高度100％ html，body和包含所有其他元素的容器时出现问题。设置高度100％为HTML和正文

当我使用浏览器的开发工具时，我发现html和body的高度是而不是100％。谁能告诉我发生了什么事？

<html style="height: 100%;"> 
    <head></head> 
     <body style="height: 100%; background: #000;"> 
      <div class="container" style="height: 100%; margin: 0 30px; background: #ccc;"> 
       <div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">A</div> 
       <div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">B</div> 
       <div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">C</div> 
     </div> 
    </body> 
</html>

来源

2017-01-04 hayley

你期望发生的？你已经放置了三个div（最小）100％的高度 - 它必须放在某个地方。 –

@torazaburo我想设置容器的背景。所有的孩子div应该是加利的不是吗？ – hayley

我的快速猜测：我认为你想用100vh代替。或绝对定位。 div上的100％高度与其父级的100％高度不同。 – RMo

您应该应用CSS定位得到100％的高度，试试下面的CSS代码：

<body style="position:absolute; width:100%; height:100%; left:0; top:0; background-color:#f00; padding:0; margin:0;">

来源

2017-01-04 07:02:00 Hanif

有经常被添加到主体的保证金，你就需要用手工将其删除：

<body style="height: 100%; background: #000; margin: 0; padding: 0">

来源

2017-01-04 07:06:34

块元素的高度可以设置，除非它包含在另一个100％高度div中。另外，对于绝对浏览器支持，最好使用6位数的颜色代码。试试这个，共享结果，请：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #000000; 
}

来源

2017-01-04 07:19:18

使用jQuery的到做到这一点：

$(window).load(function() { 
    var windowHeight = $(window).height(); // get window height 
    $('html, body').height(windowHeight); // set window height to html & body 
})

来源

2017-01-04 07:57:23

设置高度100％为HTML和正文

回答

相关问题