CSS--整体布局

客官°小女子只卖身不卖艺 2022-09-02 11:38 152阅读 0赞

原文网址：[CSS--整体布局\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN]

# 其他网址 #

[CSS--高度铺满\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN 1]

# 头+主体 #

## 方案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*/
            }
    
            .container {
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .header {
                height: 100px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
    
            .main {
                height: 100%;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">主体</div>
    </div>
    
    </body>
    </html>

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

## 方案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*/
            }
    
            .container {
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .header {
                height: 100px;
                background-color: pink;
                margin: -100px 0 0;
            }
    
            .main {
                height: 100%;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">主体</div>
    </div>
    
    </body>
    </html>

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

# 头+左右侧边栏+主体 #

## 方案1：flex ##

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .container {
                display: flex;
                /*flex-direction: row;*/
                /*flex: 1;*/
                /*flex-basis: auto;*/
                /*min-width: 0;*/
            }
    
            .header {
                background-color: pink;
                height: 100px;
                flex: 1;
                /*flex-basis: auto;*/
                /*overflow: auto;*/
            }
    
            .container.middle {
                position: absolute;
                top: 100px;
                bottom: 0;
                left: 0;
                right: 0;
            }
    
            .aside {
                background-color: greenyellow;
                overflow: auto;
                width: 200px;
                /*box-sizing: border-box;*/
                /*flex-shrink: 0;*/
            }
    
            .main {
                background-color: orange;
                flex: 1;
                /*flex-basis: auto;*/
                /*overflow: auto;*/
                /*box-sizing: border-box;*/
            }
    
        </style>
    </head>
    
    <body>
    <div class="outer">
        <div class="container">
            <div class="header">头部</div>
            <div class="container middle">
                <div class="aside">左侧边</div>
                <div class="main">主体</div>
                <div class="aside">右侧边</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

结果

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][] 方案2：position ##

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                height: 100%;
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .header {
                height: 100px;
                background-color: pink;
            }
    
            .aside-left {
                background-color: greenyellow;
                position: absolute;
                width: 200px;
                top: 100px;
                bottom: 0;
            }
    
            .main {
                background-color: orange;
                position: absolute;
                top: 100px;
                bottom: 0;
                left: 200px;
                right: 200px;
            }
    
            .aside-right {
                background-color: greenyellow;
                position: absolute;
                width: 200px;
                top: 100px;
                bottom: 0;
                right: 0;
            }
        </style>
    </head>
    
    <body>
    <div class="container">
        <div class="header">头部</div>
        <div class="container">
            <div class="aside-left">左侧边</div>
            <div class="main">主体</div>
            <div class="aside-right">右侧边</div>
        </div>
    </div>
    
    </body>
    </html>

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]

[CSS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/119336418
[CSS--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/119256931
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20220829/5f4934981d0b49dca6e6c3c7372deebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220829/f509f10ecab94a2bbf6603bc5d31ec2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20220829/9872854dfb074da8a504fb0e2082c61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20220829/ef09a8d03f8f4ba09e593d2aa56a0e95.png