关于页面无法实现高度100%的原因及实现方法。

1.由于页面中的html和body默认高度都是自适应的，所以单单给盒子设置高度100%是没有效果的，应该给html和body同时设置高度100%，这样才能把盒子撑开。

但是又由于body默认有margin外边距，所以只设置高度会出现竖向的滚动条。需要设置margin：0；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>成功设置100%高度去除滚动条</title>
 6     <style type="text/css">
 7         html,body{
 8             height: 100%;
 9         }
10         body{
11             margin: 0;
12         }
13     </style>
14 </head>
15 <body>
16 <div style="height: 100%;background-color: #4d85d1">
17     所在div设置高度100%
18 </div>
19 </body>
20 </html>

转载于:https://www.cnblogs.com/liweiz/p/10761253.html

关于页面无法实现高度100%的原因及实现方法。相关推荐

CPU占用100％原因及解决方法
CPU占用100%原因及解决方法我们在使用Windows XP操作系统的时候,用着用着系统就变慢了,一看"任务管理器"才发现CPU占用达到100%.这是怎么回事情呢?遇到病毒了, ...
html页面中DIV高度100%设置问题
初学HTML5,需要实现网页DIV左右居中,高度自动填充到100.发现对页面中DIV设置100%高度属性时无效.后来查资料发现HTML网页中div高度继承自父元素-->body-->htm ...
XP中CPU占用率100％原因及解决方法
我们在使用Windows XP操作系统的时候,用着用着系统就变慢了,一看"任务管理器"才发现CPU占用达到100%.这是怎么回事情呢?遇到病毒了,硬件有问题,还是系统设置有问题,在 ...
关于浮动元素float使其父元素高度塌陷的原因及解决方法
浮动元素使其父级元素高度塌陷在没有设置浮动前(父级元素背景色为黑色) 给两个子元素设置左浮动后,在示例中仿佛父元素消失了,其实父元素并没有消失,只是高度被计算为0.这就要回到浮动元素的特性来说明此问 ...
vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面,App.vue 页面中加 //App.vue 页面中 <style>html,body,#app{height: 100%;b ...
如何设置网页页面高度100%
网页页面高度铺满全屏的方法在设置页面页面铺满的时候,还没开始我就发现了问题,高度是高度不像宽度,是无法设置为100%的: 但是h5融媒体都是铺满全屏的,所以一定是有什么方法的,因此我去度娘了.看到最 ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
html textarea 自动高度,HTML页面中textarea高度自适应解决方案
背景: 页面上加了一个div标签,div标签下有一个textarea标签,textarea的内容通过后台读取数据自动填充,希望通过textarea的高度随着内容的增减,自动调整,在网上说通过设置tex ...
设置html的table高度100%
去掉页面头的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

关于页面无法实现高度100%的原因及实现方法。

关于页面无法实现高度100%的原因及实现方法。相关推荐

最新文章

热门文章