CSS--高度铺满

迷南。 2022-09-02 05:21 132阅读 0赞

原文网址：[CSS--高度铺满\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN]

# 其他网址 #

[div 自适应高度 自动填充剩余高度 - 庞国明 - 博客园][div _ _ - _ -]  
[如何让 height:100%; 起作用 – WEB骇客][height_100_ _ _ WEB]  
[css关于height:100%和撑满高度的问题 - SegmentFault 思否][css_height_100_ - SegmentFault]

# 简介 #

**场景**

> 经常会有这种布局：头部固定高度，中间是内容，需要撑满高度。

# 方案（height: 100%） #

**简介**

> height：100% 需要先定义节点的所有父节点的高度为height：100%才生效的。
> 
> 父节点包括html、body等。

**失败的做法（只设置本标签为height: 100%）**

> 如下所示：
> 
>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>This is title</title>
>         <style>
>             .A {
>                 height: 50px;
>                 background-color: pink;
>             }
>             .B {
>                 background-color: orange;
>                 height: 100%;
>             }
>         </style>
>     </head>
>     
>     <body>
>     <div class="outer">
>         <div class="A">头部DIV</div>
>         <div class="B">下部DIV</div>
>     </div>
>     
>     </body>
>     </html>
> 
> 这样是不行的，结果如下：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

## 方案1：设置header的position ##

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                height: 100%;
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .outer {
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .A {
                height: 100px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
    
            .B {
                height: 100%;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
    <div class="outer">
        <div class="A">头部DIV</div>
        <div class="B">下部DIV</div>
    </div>
    
    </body>
    </html>

结果

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

## 方案2：设置header的margin ##

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                height: 100%;
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .outer {
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .A {
                height: 100px;
                background-color: pink;
                margin: -100px 0 0;
            }
    
            .B {
                height: 100%;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
    <div class="outer">
        <div class="A">头部DIV</div>
        <div class="B">下部DIV</div>
    </div>
    
    </body>
    </html>

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

[CSS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/119256931
[div _ _ - _ -]: https://www.cnblogs.com/pangguoming/p/5695184.html
[height_100_ _ _ WEB]: https://www.webhek.com/post/css-100-percent-height.html
[css_height_100_ - SegmentFault]: https://segmentfault.com/q/1010000009614177
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20220829/31fb0feef5e648c8b22dd81df01ecc89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220829/30580b4db7bf43d7938d5ec976be2ac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20220829/659409b760e841518e62455bf87f9a1b.png