The layout as shown in figure

The flex implementation


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using Flex, the sidebar is fixed width</title>
    <style>
        html.body.p {
            padding: 0;
            margin: 0;
        }
        section {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
        section div {
            flex: 1;
        }
        .header {            
            height: 70px;
            background: red;
        }
        .footer {            
            height: 70px;
            background: # 808080;
        }

        .sidebar {        
            flex: 0 0 200px;  /* Fixed width, no scaling required */    
            height: 300px;
            background: green;
        }

        .ads {
            height: 200px;
            background: #DDDDDD;
        }
        .conve {
            flex: 0 0 100px;  /* Fixed width, no scaling required */    
            height: 300px;
            background: yellow;
        }
        .main {
            height: 100px;
            color: #fff;
            background: black;
        }        
        .inner-box {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
        .inner-box .nav {        
            flex: 1 0 100%;    
            height: 100px;
            background: orange;
        }
        .inner-box .conve {
            flex: 0 0 200px;
        }
        .inner-box .ads {
            flex-grow: 1;
        }
        .inner-main {
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .inner-main .main {
            margin-left: -200px; /* 200px is the sidebar width */
        }
    </style>
</head>
<body>

    <div class="header"><p>header</p></div>
    <section>
        <div class="sidebar">
            <p>sidebar</p>
            <p>Fixed width, 200px</p>
            <p>Nav, ADS, conve, and main all belong to the inner-box</p>
        </div>

        <! The entire container ADAPTS to space outside the sidebar -->
        <div class="inner-box">
            <div class="nav">
                <p>nav</p>
                <p>The parent container is inner-box, with an adaptive width that fills one row of the inner box</p>
                <p>Ads, main belongs to the sun container inner-main</p>
            </div>

            <! Inner -box (nav); inner-box (nav); inner-box (nav);
            <! -- Take up space except conve fixed width -->
            <div class="inner-main">
                <div class="ads">
                    <p>ads</p>
                    <p>Adaptive widths. In the inner-main container, we have a vertical layout, so ads will fill the line</p>
                </div>


                <div class="main">
                    <p>main</p>
                    <p>Main is in the container inner-main, so it is only as wide as inner-main (that is, as wide as ADS). Set its margin-left to be the negative value of the width of sidebar. Self-adaptive width can fill the blank area below sidebar to achieve the effect</p>
                </div>
            </div>        

            <! On the same line as inner-main
            <div class="conve">
                <p>conve</p>
                <p>Fixed width, 200px</p>
            </div>
        </div>        
    </section>
    <div class="footer"><p>footer</p></div>

</body>
</html>Copy the code

Floating implementation


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Floating layout, side bars fixed width</title>
    <style>
        html.body.p {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 50px;
            width: 100%;
            background: red;
        }
        .wraper {
            overflow: hidden;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: 300px;
            background: green; 
        }
        .nav {
            overflow: hidden;
            height: 100px;
            background: #F6A428;
        }
        .inner-box .ads {
            overflow: hidden;
            height: 200px;
            background: #DDDDDD;
        }
        .inner-box .conve {
            float: right;
            width: 200px;
            height: 400px;
            background: yellow;
        }
        .main {    
            overflow: hidden;
            height: 200px;
            color: #fff;
            background: black;
        }
        .footer {
            float: left;
            clear: both;
            height: 100px;
            width: 100%;
            background: # 808080;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"><p>header</p></div>
        <div class="wraper">
            <div class="sidebar">
                <p>sidebar</p>
                <p>Float left with a fixed width of 200px</p>
            </div>
            <div class="nav">
                <p>nav</p>
                <p>overflow:hidden; Implementing BFC, which is not obscured by the floating sidebar, follows</p>
            </div>
            <div class="inner-box">                
                <div class="conve">
                    <p>conve</p>
                    <p>Float right with a fixed width of 200px</p>
                </div>
                <div class="ads">
                    <p>ads</p>
                    <p>Ads, conve, main inside a div</p>
                    <p>Ads set overflow: hidden; Implement BFC, adaptive remaining width, will not be left floating sidebar and right floating Conve block</p>
                </div>
                <div class="main">
                    <p>main</p>
                    <p>overflow:hidden; Following the right-floating conve, ADAPTS to the remaining width</p>
                </div>
            </div>
        </div>
        <div class="footer"><p>footer</p></div>
    </div>
</body>
</html>Copy the code