<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
/* body {
background: url('bg.jpg') no-repeat 0 0/100%;
} */
.clearfix::after {
content: '';
display: block;
clear: both
}
.container {
border: 1px solid #333;
overflow: hidden;
position: relative;
}
.container .left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background-color: red;
height: 10000px;
margin-bottom: -9990px;
/* 此最后两行实现左右栏高度随与main高度等高*/
}
.container .right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: green;
height: 10000px;
margin-bottom: -9990px;
}
.container .main {
background-color: blue;
margin: 0 200px;
padding: 0 20px;
/* main宽度随视口宽度自适应*/
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic perspiciatis laborum ullam sapiente aliquam officiis
itaque facilis pariatur sint, et minima inventore delectus obcaecati sed voluptatibus rerum assumenda tempora
optio magni, saepe nesciunt, deleniti cumque quis ab! Molestias atque voluptatibus magni laborum magnam distinctio
quos incidunt repudiandae quis, sapiente consectetur voluptatum, assumenda dolorum optio recusandae suscipit illum
sint doloribus facilis ad. Libero nisi, sit iure dolor accusantium minima nemo sed reprehenderit veritatis tempore
asperiores impedit tenetur non ut repellat ab doloremque earum id. Ad beatae, corporis quisquam iste ab voluptates
dignissimos impedit natus ipsa fuga deleniti porro ullam veritatis numquam, quis accusamus odit itaque praesentium
debitis quae recusandae ducimus aut optio! Blanditiis quia corrupti consequuntur aperiam praesentium eveniet sed
facilis, maxime impedit quae molestiae minima aliquid asperiores atque aut velit excepturi nemo, fugiat, quidem
iure? Ratione reprehenderit natus cupiditate eius nobis pariatur esse voluptates optio at fuga? Eius quo quisquam
deserunt provident harum magni, blanditiis est libero error et fuga dolore pariatur amet id labore excepturi
consequuntur ea distinctio ex reiciendis dolor tenetur cum cumque? Asperiores, accusamus laboriosam vitae vel
voluptate, quos velit quo ut ipsum quod ex. Officia corrupti ut dolore magnam eligendi nihil nisi pariatur
voluptate. Corrupti pariatur placeat consequatur veniam. Deleniti, voluptas aperiam aliquam harum quia
praesentium! Quibusdam asperiores iste commodi suscipit! Non possimus soluta impedit praesentium quo excepturi cum
consectetur delectus quidem minima? Ad doloremque odio, ipsum praesentium voluptatum, mollitia ut laudantium
maxime ratione tempora incidunt saepe quas eum. Quo, sint excepturi suscipit omnis possimus dolorum est voluptas
fugiat nulla error et beatae quibusdam ea expedita incidunt? Vel expedita debitis cumque quidem, harum tempore
culpa sed quibusdam nisi nulla nam ea hic illum possimus numquam odio provident aperiam deserunt accusantium sit
assumenda suscipit aut corrupti porro. Molestiae, quos nisi quibusdam enim reiciendis ullam laboriosam blanditiis
mollitia? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, excepturi consectetur sapiente
delectus vitae praesentium blanditiis eaque, hic dicta sed beatae nostrum amet. Harum, sed quis maxime debitis
corrupti cumque obcaecati repellendus necessitatibus repudiandae tempora delectus odio qui dignissimos earum
voluptatem aspernatur quibusdam accusamus voluptas quam quidem enim magnam. Ad eum, quo tempora consectetur esse
quaerat doloribus id odit ducimus, eos error tenetur voluptatem iure quis atque adipisci voluptates itaque. Odio
ipsa repellat, voluptates voluptatem ad pariatur maiores illum atque explicabo earum placeat. Voluptatem rerum
culpa aliquid a ad omnis perspiciatis non deleniti voluptate ut, error nesciunt enim pariatur! Eius cum impedit,
iusto dicta architecto autem rem. Saepe deserunt quas nulla magni, tempore aliquam obcaecati vel, dolore ex
asperiores, quia beatae iusto reprehenderit facere earum itaque exercitationem explicabo corporis facilis
nesciunt! Rerum officiis porro mollitia officia quae consequatur tempora, nihil quibusdam. Ex officia numquam
eaque dicta voluptatem ab magni natus praesentium sit sint eos nobis voluptatibus inventore ut cum voluptates
quisquam dignissimos repellat exercitationem pariatur beatae vel, molestiae ea sunt. Dicta unde inventore iste
explicabo quos id praesentium qui, tempore consectetur voluptas alias amet nihil vero iure sequi facere, quas
porro vitae. Quia eveniet aliquid similique provident quod corporis laboriosam voluptas! Iusto suscipit expedita
necessitatibus vitae facilis autem esse aperiam quis excepturi error illo, molestiae vero aut at earum. Laborum et
maxime, illum veniam non labore tenetur illo reprehenderit ab sunt aliquam officiis totam inventore corrupti
perferendis. Adipisci sapiente maxime neque iste autem dicta dolore nihil deleniti consequuntur illo, dignissimos
recusandae, porro incidunt! Ab atque tempora quaerat inventore doloribus! Necessitatibus eaque rerum sapiente
deserunt excepturi qui cupiditate quia dolor obcaecati ex commodi, praesentium ipsam fugit alias ea doloremque
quis minus rem et laboriosam magnam. Ab, excepturi! Repudiandae quaerat, iure illo architecto eum, voluptatibus
quas laudantium illum corrupti facere quod libero!
</div>
<aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quibusdam perferendis odit
similique nobis doloremque! Expedita architecto temporibus veritatis quam, facere quas beatae, nihil maiores
repudiandae corporis eum, aliquid accusamus tenetur odit nisi ipsum. ?</aside>
<aside class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic ut porro, nobis labore velit,
repellat, iste excepturi vel modi sit maiores? Veniam pariatur quod vitae cumque impedit alias adipisci corporis
laudantium commodi assumenda sint fuga modi ipsam,
distinctio vel. Quam?</aside>
</div>
</body>
</html>
