height:100%;元素撑满整个浏览器

最新推荐文章于 2023-10-20 16:50:22 发布

敏敏张

最新推荐文章于 2023-10-20 16:50:22 发布

阅读量1.4k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/jquery_zhang/article/details/50787241

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

height的百分比

height百分比的大小是相对其最近的父元素的高的大小，其最近的父元素应该有一个明确的高度值才能使其百分比高度生效

min-height 百分比

设置min-height 的元素即使内容很少时也能撑到min-height设置的高度，当内容大于min-height时就设置为内容的高度。

注意：父元素设置了min-height,但没有设置height属性时，子元素的height和min-height不会生效。
因为设置height和min-height必须基于一个固定的高度或者是一个有效百分比高度的父元素

代码展示

<div class="contain1">
    <div class="wap1">
        map1的height 生效
    </div>
</div>
<div class="contain2">
    <div class="wap2">
        wap2的height不生效
    </div>
</div>

css

.contain1
{
    height:100px;
    background-color:red;
}
.map1
{
    height:50%;
    background-color:green;
}

.contain2
{
    min-height: 100px;
}
.map2
{
    /*该min-height无效,因为其父元素没有设置有效的height属性(即使设置了min-height属性)*/
    min-height:50%;
    background-color:green;
}

div布满屏幕

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title> 
</head>
<body>
<div class="container">
    <div class="header">头部</div>
    <div class="page">
        <div class="left">left sidebar</div>
        <div class="content">main content</div>
        <div class="right">right sudebar</div>
    </div>
    <div class="footer">footer section</div>
</div>
</body>
</html>

css:

    html,body{
       /*将height设置为100%,使得内容铺满屏幕*/
       /*且#container有高度基于的父元素*/
        height: 100%;
        background-color: #dddddd;
    }

    #container {
        /*即使内容很少,也能铺满整个屏幕*/
        /*当内容高度大于屏幕高度时,内容会延伸*/
        min-height: 100%;
        background-color: #ffffff;
        width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

敏敏张

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
height:100%;元素撑满整个浏览器

height的百分比height百分比的大小是相对其最近的父元素的高的大小，其最近的父元素应该有一个明确的高度值才能使其百分比高度生效min-height 百分比设置min-height 的元素即使内容很少时也能撑到min-height设置的高度，当内容大于min-height时就设置为内容的高度。注意：父元素设置了min-height,但没有设置height属性时，子元素的height和min-h
复制链接

扫一扫