浅谈CSS满屏品字布局中div设置height为百分比无效的问题

最新推荐文章于 2023-12-14 15:29:58 发布

筱葭

最新推荐文章于 2023-12-14 15:29:58 发布

阅读量1.8k

点赞数 1

分类专栏： CSS 文章标签： CSS 满屏品字 height百分比

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/59055171

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

满屏品字布局：

<!DOCTYPE html>  
<html>  
    <head>  
        <title></title>  
        <style>  
            html,body{   
                margin:0;    
                height:100%;     
            }  
            #top{  
                width:50%;  
                height:50%; 
				margin:0 auto;				
                background:red;  
            }  
            #left{  
                width:50%;  
                height:50%;  
                float:left;  
                background:blue;  
            }  
            #right{  
                width:50%;  
                height:50%;  
                float:left;  
                background:yellow;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="top"></div>   
        <div id="left"></div>   
        <div id="right"></div>   
    </body>  
</html>

有时候，我们需要将div的高度设置为百分比形式，以便能更好的适配各种屏幕大小，如height：60%。

问题：height：60%无效。

解决办法：添加html, body{ margin:0; height:100%; }。

筱葭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS满屏品字布局中div设置height为百分比无效的问题

满屏品字布局： html,body{ margin:0; height:100%; } #top{ width:100%; height:60%; background:red; } #left{ width:50%; height:40%; float:left; b
复制链接

扫一扫