10.佈局:兩欄和主區域在後的三欄佈局，實現側邊欄和主區域偽等高、實現主區域在前的三欄佈局

主區域自適應可視視窗的兩欄佈局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

主區域自適應可視視窗的兩欄佈局：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="./reset.css">
<style>
.clearfix::after{
content:"";
display:block;
clear:both;
}
.container{
min-width:700px;
}
.left{
float:left;
width:300px;
margin-right:10px;
border:1px solid #000;
background:#008c8c;
}
.main{
overflow:hidden;
border:1px solid #000;
background:lightblue;
}
</style>
</head>

<body>
<div class="container clearfix">
<div class="left">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa corporis ad dolorum beatae magnam ex error maiores accusantium, unde architecto consequatur non quam quasi, commodi pariatur doloribus dolor at animi!
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque rem impedit ex sunt in eaque mollitia non magni nihil veritatis nulla ullam quod corrupti quibusdam enim rerum eos expedita, nisi, quia tempore! Veritatis blanditiis adipisci perspiciatis rem velit tenetur laborum sint nostrum harum commodi voluptatibus deserunt vero, cum provident quaerat beatae. Voluptate cumque, repellendus similique, consectetur porro ut error earum sunt magnam quis odit blanditiis quas fugiat nesciunt eos aliquid ipsum nam quod non fuga quasi incidunt. A, distinctio? Quod recusandae ad quos neque! Laborum velit, obcaecati animi est perferendis, provident, totam ut ullam libero repellat impedit. Corrupti quidem suscipit quia voluptates iusto cum dignissimos, dolores architecto voluptas repellat itaque maiores. Porro nobis suscipit iure eveniet odio illo obcaecati perferendis, nemo dignissimos esse doloribus voluptatum eum cupiditate ab. Nisi temporibus vero fugit consequuntur perferendis molestiae soluta ullam nemo tempora eum quam eveniet non at quas alias, harum fugiat iusto molestias libero placeat expedita vel doloremque! Recusandae dolorum, dignissimos id libero laudantium praesentium molestias aperiam veritatis totam? Nesciunt velit voluptas tenetur ea id nobis necessitatibus sequi dolor odit eum. Deleniti totam odio minus error numquam adipisci blanditiis rem ullam vel esse molestias magnam exercitationem temporibus quis inventore nam, laborum et laudantium quas quae facere corrupti neque fugit soluta. Exercitationem nobis beatae natus consequuntur velit saepe, sequi vitae repudiandae assumenda! Minus, harum! Eius, ratione assumenda ipsum temporibus dicta deserunt suscipit aperiam harum perferendis nostrum aspernatur sed, laudantium beatae perspiciatis non laborum eos hic. Natus, omnis. Ut dolores, repellat asperiores adipisci deserunt doloremque ex tenetur odio accusantium. Accusamus ducimus qui ipsa eum nobis quasi, earum quaerat fuga quia quam sed nam deserunt dicta magni suscipit. Distinctio voluptas architecto eaque quam ad doloribus? Praesentium officiis consectetur placeat obcaecati, dicta laudantium delectus tempora odit nam omnis fuga sint fugiat accusantium facere minus error consequatur minima reprehenderit vel. Fugit accusamus expedita dolorum iste doloremque quibusdam alias inventore illo iusto voluptatem aut minus minima amet ullam dolor commodi vel suscipit hic libero atque autem, quo quia? Reiciendis minima cupiditate ut placeat laborum provident iusto, sed dolorum nemo accusamus repellat perferendis ducimus sunt, unde delectus ad exercitationem. Dicta consequuntur iusto quae assumenda, voluptatum repudiandae reiciendis quia rem dolores laudantium, temporibus repellat perferendis adipisci. Ab sunt fugit, eos necessitatibus harum neque explicabo esse hic facere illo aspernatur tenetur iure ullam magni, cum laborum atque. Corrupti quod explicabo reprehenderit cum nulla placeat quo cupiditate. Dolorem quos ad delectus tempore ipsum. Quia veniam cum accusamus, eius voluptates pariatur amet fuga ex aut quos culpa numquam unde magni vitae voluptatibus voluptatum hic placeat eveniet dolor incidunt similique cupiditate, animi modi. Eveniet inventore nam facere, vel quod earum optio corporis? Sit officia dignissimos ea accusantium exercitationem, nihil ullam obcaecati porro quia minus id recusandae sint vitae tempore mollitia cupiditate laudantium impedit iure. Corrupti, facere cupiditate, aliquam dolore, eveniet sit magni architecto nobis dolores nulla sequi explicabo nemo. Adipisci explicabo excepturi, repellat id tempora labore. Necessitatibus veniam, cupiditate eligendi rerum neque magnam pariatur officiis fuga expedita corrupti a adipisci fugit nulla distinctio totam error? Fugiat, facere quas! Quam culpa id corrupti hic, enim adipisci quia deleniti ipsam, iure dolore quod natus quis nisi facere officia voluptas voluptatem reiciendis exercitationem placeat repellendus fugit maiores! Rerum natus distinctio facere doloremque, pariatur asperiores ipsa cum ex fugit eum nostrum quisquam voluptatum delectus recusandae accusamus magnam dolor a eveniet nihil officiis ipsam ea voluptatem quibusdam deserunt. Odio consequuntur animi reiciendis illo quod unde tempore doloribus inventore adipisci. Quos aliquam in vero voluptatum placeat, explicabo sequi perspiciatis nihil rem unde ea sit corrupti ipsam! Odit obcaecati saepe nostrum ullam delectus, adipisci accusamus nam fugit laudantium maiores modi alias corporis mollitia, repudiandae beatae natus. Illo porro esse, inventore est, quibusdam excepturi impedit necessitatibus voluptates explicabo vel iure delectus magni voluptatibus quia minus accusamus! Rerum perspiciatis architecto iusto illum cupiditate eos ratione provident dolore nemo quidem, voluptatem explicabo! Distinctio qui deleniti aliquam unde voluptatum sint. Corporis eius beatae obcaecati magnam quidem suscipit cumque optio corrupti aut itaque nobis fuga totam voluptatibus ad, exercitationem minus in? Aperiam voluptates accusantium facilis quas sapiente adipisci ipsum consectetur iusto dolorum hic, laboriosam corporis a, amet atque nam voluptatum nobis officiis est? Fugiat reiciendis, autem alias quasi ullam rerum tempore molestias dicta! Repellendus a excepturi laborum in, optio voluptatibus recusandae rem error necessitatibus est minima natus aspernatur enim, impedit dolores quibusdam sit nulla. Ratione placeat modi nobis? Ullam possimus totam deleniti recusandae! Porro eius voluptas veniam quisquam blanditiis, nulla quae illum magnam in odio accusantium aliquam minima deserunt recusandae rem consectetur enim asperiores, corrupti sunt voluptatem corporis omnis! Eveniet cupiditate totam voluptatum vero culpa quos vel ratione blanditiis, ad praesentium eos laborum ut nulla nam doloremque perferendis labore excepturi? Debitis, iste! Ea neque laboriosam praesentium illo labore vitae amet! Earum placeat laborum doloribus quisquam sed minima quo quidem facilis obcaecati magni incidunt provident, similique, asperiores expedita odit iste assumenda magnam aliquid dignissimos facere, excepturi mollitia. Omnis, quasi. Repellat, atque sed rem sint adipisci incidunt laborum fugiat inventore veritatis ut minima numquam? Nam ex explicabo inventore repellat soluta nulla cupiditate sunt? Quasi, fugit perspiciatis? Blanditiis illum nihil exercitationem autem ducimus cupiditate, quibusdam totam velit ratione consectetur. Quia blanditiis amet est distinctio optio id voluptate pariatur architecto, odio hic sint, fuga cumque aliquid reiciendis itaque repellendus illum corporis fugiat natus molestias obcaecati. Quasi commodi ea cumque consectetur autem minima, quisquam nemo asperiores? Et provident ab corporis quos rerum iste totam quas in a facere mollitia incidunt consectetur officiis, neque odio, ipsum reiciendis harum? Voluptatum enim neque harum, quibusdam illum voluptate ipsum et possimus aliquid placeat nisi tempora similique porro qui aperiam quidem doloribus soluta in rerum ducimus! Reprehenderit officia dolor ea corporis! Totam quaerat eius delectus commodi inventore saepe ipsum voluptatum soluta aperiam, voluptatem corporis excepturi odio ratione quod quasi fuga nisi quisquam. Incidunt ipsa praesentium aperiam, et in laborum! Amet ratione dolorum tenetur, atque similique sapiente minus accusamus dolore iure quas adipisci quidem obcaecati ipsa dolores tempora, unde totam. Odio, explicabo voluptatem nam debitis ipsa earum nulla perspiciatis nisi ipsum ex in modi magnam nobis voluptatibus dolore!
</div>
</div>

</body>

</html>

index.html

效果展示：

主區域在後的三欄佈局：

左右側邊欄定寬，主區域自適應

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="./reset.css">
<style>
.clearfix::after{
content:"";
display:block;
clear:both;
}
.container{
min-width:400px;
}
.left{
float:left;
width:100px;
margin-right:10px;
border:1px solid #000;
background:#008c8c;
}
.right{
float:right;
width:100px;
margin-left:10px;
border:1px solid #000;
background:#008c8c;
}
.main{
overflow:hidden;
border:1px solid #000;
background:lightblue;
}
</style>
</head>

<body>
<div class="container clearfix">
<div class="left">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa corporis ad dolorum beatae magnam ex error maiores accusantium, unde architecto consequatur non quam quasi, commodi pariatur doloribus dolor at animi!
</div>
<div class="right">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci, quod placeat illum odio doloribus ratione distinctio eveniet laboriosam labore quidem tempore! Ducimus assumenda explicabo, accusamus fugiat sunt vel recusandae sint.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque rem impedit ex sunt in eaque mollitia non magni nihil veritatis nulla ullam quod corrupti quibusdam enim rerum eos expedita, nisi, quia tempore! Veritatis blanditiis adipisci perspiciatis rem velit tenetur laborum sint nostrum harum commodi voluptatibus deserunt vero, cum provident quaerat beatae. Voluptate cumque, repellendus similique, consectetur porro ut error earum sunt magnam quis odit blanditiis quas fugiat nesciunt eos aliquid ipsum nam quod non fuga quasi incidunt. A, distinctio? Quod recusandae ad quos neque! Laborum velit, obcaecati animi est perferendis, provident, totam ut ullam libero repellat impedit. Corrupti quidem suscipit quia voluptates iusto cum dignissimos, dolores architecto voluptas repellat itaque maiores. Porro nobis suscipit iure eveniet odio illo obcaecati perferendis, nemo dignissimos esse doloribus voluptatum eum cupiditate ab. Nisi temporibus vero fugit consequuntur perferendis molestiae soluta ullam nemo tempora eum quam eveniet non at quas alias, harum fugiat iusto molestias libero placeat expedita vel doloremque! Recusandae dolorum, dignissimos id libero laudantium praesentium molestias aperiam veritatis totam? Nesciunt velit voluptas tenetur ea id nobis necessitatibus sequi dolor odit eum. Deleniti totam odio minus error numquam adipisci blanditiis rem ullam vel esse molestias magnam exercitationem temporibus quis inventore nam, laborum et laudantium quas quae facere corrupti neque fugit soluta. Exercitationem nobis beatae natus consequuntur velit saepe, sequi vitae repudiandae assumenda! Minus, harum! Eius, ratione assumenda ipsum temporibus dicta deserunt suscipit aperiam harum perferendis nostrum aspernatur sed, laudantium beatae perspiciatis non laborum eos hic. Natus, omnis. Ut dolores, repellat asperiores adipisci deserunt doloremque ex tenetur odio accusantium. Accusamus ducimus qui ipsa eum nobis quasi, earum quaerat fuga quia quam sed nam deserunt dicta magni suscipit. Distinctio voluptas architecto eaque quam ad doloribus? Praesentium officiis consectetur placeat obcaecati, dicta laudantium delectus tempora odit nam omnis fuga sint fugiat accusantium facere minus error consequatur minima reprehenderit vel. Fugit accusamus expedita dolorum iste doloremque quibusdam alias inventore illo iusto voluptatem aut minus minima amet ullam dolor commodi vel suscipit hic libero atque autem, quo quia? Reiciendis minima cupiditate ut placeat laborum provident iusto, sed dolorum nemo accusamus repellat perferendis ducimus sunt, unde delectus ad exercitationem. Dicta consequuntur iusto quae assumenda, voluptatum repudiandae reiciendis quia rem dolores laudantium, temporibus repellat perferendis adipisci. Ab sunt fugit, eos necessitatibus harum neque explicabo esse hic facere illo aspernatur tenetur iure ullam magni, cum laborum atque. Corrupti quod explicabo reprehenderit cum nulla placeat quo cupiditate. Dolorem quos ad delectus tempore ipsum. Quia veniam cum accusamus, eius voluptates pariatur amet fuga ex aut quos culpa numquam unde magni vitae voluptatibus voluptatum hic placeat eveniet dolor incidunt similique cupiditate, animi modi. Eveniet inventore nam facere, vel quod earum optio corporis? Sit officia dignissimos ea accusantium exercitationem, nihil ullam obcaecati porro quia minus id recusandae sint vitae tempore mollitia cupiditate laudantium impedit iure. Corrupti, facere cupiditate, aliquam dolore, eveniet sit magni architecto nobis dolores nulla sequi explicabo nemo. Adipisci explicabo excepturi, repellat id tempora labore. Necessitatibus veniam, cupiditate eligendi rerum neque magnam pariatur officiis fuga expedita corrupti a adipisci fugit nulla distinctio totam error? Fugiat, facere quas! Quam culpa id corrupti hic, enim adipisci quia deleniti ipsam, iure dolore quod natus quis nisi facere officia voluptas voluptatem reiciendis exercitationem placeat repellendus fugit maiores! Rerum natus distinctio facere doloremque, pariatur asperiores ipsa cum ex fugit eum nostrum quisquam voluptatum delectus recusandae accusamus magnam dolor a eveniet nihil officiis ipsam ea voluptatem quibusdam deserunt. Odio consequuntur animi reiciendis illo quod unde tempore doloribus inventore adipisci. Quos aliquam in vero voluptatum placeat, explicabo sequi perspiciatis nihil rem unde ea sit corrupti ipsam! Odit obcaecati saepe nostrum ullam delectus, adipisci accusamus nam fugit laudantium maiores modi alias corporis mollitia, repudiandae beatae natus. Illo porro esse, inventore est, quibusdam excepturi impedit necessitatibus voluptates explicabo vel iure delectus magni voluptatibus quia minus accusamus! Rerum perspiciatis architecto iusto illum cupiditate eos ratione provident dolore nemo quidem, voluptatem explicabo! Distinctio qui deleniti aliquam unde voluptatum sint. Corporis eius beatae obcaecati magnam quidem suscipit cumque optio corrupti aut itaque nobis fuga totam voluptatibus ad, exercitationem minus in? Aperiam voluptates accusantium facilis quas sapiente adipisci ipsum consectetur iusto dolorum hic, laboriosam corporis a, amet atque nam voluptatum nobis officiis est? Fugiat reiciendis, autem alias quasi ullam rerum tempore molestias dicta! Repellendus a excepturi laborum in, optio voluptatibus recusandae rem error necessitatibus est minima natus aspernatur enim, impedit dolores quibusdam sit nulla. Ratione placeat modi nobis? Ullam possimus totam deleniti recusandae! Porro eius voluptas veniam quisquam blanditiis, nulla quae illum magnam in odio accusantium aliquam minima deserunt recusandae rem consectetur enim asperiores, corrupti sunt voluptatem corporis omnis! Eveniet cupiditate totam voluptatum vero culpa quos vel ratione blanditiis, ad praesentium eos laborum ut nulla nam doloremque perferendis labore excepturi? Debitis, iste! Ea neque laboriosam praesentium illo labore vitae amet! Earum placeat laborum doloribus quisquam sed minima quo quidem facilis obcaecati magni incidunt provident, similique, asperiores expedita odit iste assumenda magnam aliquid dignissimos facere, excepturi mollitia. Omnis, quasi. Repellat, atque sed rem sint adipisci incidunt laborum fugiat inventore veritatis ut minima numquam? Nam ex explicabo inventore repellat soluta nulla cupiditate sunt? Quasi, fugit perspiciatis? Blanditiis illum nihil exercitationem autem ducimus cupiditate, quibusdam totam velit ratione consectetur. Quia blanditiis amet est distinctio optio id voluptate pariatur architecto, odio hic sint, fuga cumque aliquid reiciendis itaque repellendus illum corporis fugiat natus molestias obcaecati. Quasi commodi ea cumque consectetur autem minima, quisquam nemo asperiores? Et provident ab corporis quos rerum iste totam quas in a facere mollitia incidunt consectetur officiis, neque odio, ipsum reiciendis harum? Voluptatum enim neque harum, quibusdam illum voluptate ipsum et possimus aliquid placeat nisi tempora similique porro qui aperiam quidem doloribus soluta in rerum ducimus! Reprehenderit officia dolor ea corporis! Totam quaerat eius delectus commodi inventore saepe ipsum voluptatum soluta aperiam, voluptatem corporis excepturi odio ratione quod quasi fuga nisi quisquam. Incidunt ipsa praesentium aperiam, et in laborum! Amet ratione dolorum tenetur, atque similique sapiente minus accusamus dolore iure quas adipisci quidem obcaecati ipsa dolores tempora, unde totam. Odio, explicabo voluptatem nam debitis ipsa earum nulla perspiciatis nisi ipsum ex in modi magnam nobis voluptatibus dolore!
</div>
</div>

</body>

</html>

index.html

效果展示：

實現側邊欄和主區域偽等高：

效果展示：

缺點：是偽等高，1.主區域高度超過10000px，側邊欄不會繼續增高。

2.主區域高度小於10px，側邊欄高度大於10px，側邊欄內容會被遮蓋。

實現主區域在前的三欄佈局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- reset.css文件內容參考：https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
    <link rel="stylesheet" href="./reset.css">
    <style>
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
        .container{
            min-width:400px;
            padding:30px 0;
            position:relative;
        }
        .left{
            position:absolute;
            width:100px;
            left:30px;
            top:30px;
            border:1px solid #000;
            background:#008c8c;
        }
        .right{
            position:absolute;
            width:100px;
            right:30px;
            top:30px;
            border:1px solid #000;
            background:#008c8c;
        }
        .main{
            margin:0 140px;
            border:1px solid #000;
            background:lightblue;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti tempore molestiae possimus animi tempora dolores earum nulla enim adipisci iure recusandae suscipit dicta molestias aliquid placeat sit corporis blanditiis, quaerat consequatur pariatur facere reiciendis. Error numquam quisquam a amet laudantium officiis nulla sequi! Harum dicta architecto dolorum, sunt perferendis neque a porro facilis, nesciunt nemo ullam alias reprehenderit. Amet, iure. Adipisci aut provident neque, enim consequuntur eius voluptatibus, molestias blanditiis accusantium sed quod maxime ad! Atque vel quo numquam ab facilis perferendis corporis dolores modi a voluptatibus quae sint mollitia repellendus nemo, ipsam doloremque, impedit consequatur. Excepturi cupiditate odio voluptatibus!
        </div>
        <div class="left">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. At, ad.
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, ut!
        </div>
    </div>
    
</body>

</html>

index.html

實現效果：

實現後臺頁面佈局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- reset.css文件內容參考：https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
    <link rel="stylesheet" href="./reset.css">
    <style>
        body{
            overflow:auto;
        }
        .all{
            position:fixed;
            width:100%;
            height:100%;
            background:red;
        }
        .header{
            width:100%;
            height:60px;
            line-height:60px;
            font-size:20px;
            font-weight: bold;
            background:#000;
            color:#fff;
            box-sizing: border-box;
            position:absolute;
            left:0;
            top:0;
        }
        .container{
            width:100%;
            height:100%;
            padding-top:60px;
            background:#fff;
            box-sizing: border-box;
            overflow: hidden;
        }
        .left{
            height:100%;
            width:300px;
            padding:30px;
            box-sizing: border-box;
            background:#008c8c;
            float:left;
            overflow:auto;
        }
        .main{
            height:100%;
            padding:30px;
            box-sizing:border-box;
            background:lightblue;
            overflow:auto;
        }
    </style>
</head>

<body>
    <div class="all">
        <header class="header">
            <h1>
                這是標題
            </h1>
        </header>
        <div class="container">
            <div class="left">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate iure soluta saepe accusamus exercitationem fugiat totam, pariatur sint consequatur? Asperiores deserunt a molestiae nisi distinctio mollitia est, reiciendis facere quod velit magni labore aperiam sapiente possimus aliquam ut accusamus sed iste? Exercitationem praesentium quo fugiat maxime nulla veritatis, aliquid atque nesciunt cumque quia libero expedita voluptatibus facere aperiam earum, ea fuga id. Aut magni dicta, ex quisquam voluptas amet asperiores corporis doloribus fugiat! Voluptates perspiciatis repellendus, ipsum maiores error iusto deserunt praesentium dolor amet eaque, quisquam repudiandae doloribus? Dignissimos quos eius perferendis nobis. Eveniet adipisci quos nemo velit, voluptas aliquid odio quod, quasi repellat vero ea quas, incidunt laboriosam! Eaque aliquid blanditiis obcaecati impedit, iste ex ipsum earum nesciunt, accusantium consect