10.布局:两栏和主区域在后的三栏布局，实现侧边栏和主区域伪等高、实现主区域在前的三栏布局
程序员文章站
2022-10-28 16:00:00
主区域自适应可视窗口的两栏布局： ......
主区域自适应可视窗口的两栏布局：
<!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: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>
效果展示：
主区域在后的三栏布局：
左右侧边栏定宽，主区域自适应
<!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;
}
.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>
效果展示：
实现侧边栏和主区域伪等高：
效果展示：
缺点：是伪等高，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>
实现效果：
实现后台页面布局：
<!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 consectetur, eum a voluptatem sequi autem reiciendis praesentium consequuntur. fuga, fugiat qui iusto et minus laudantium minima atque cum, harum nobis, dicta assumenda vitae recusandae nisi. dolore ipsam voluptatem eaque exercitationem, tenetur neque iusto id dicta veniam ipsa corrupti voluptas, itaque dolores necessitatibus delectus quae ex quas fugiat error deserunt! debitis iusto est mollitia neque praesentium commodi necessitatibus voluptatem dignissimos ducimus. est vel neque facilis saepe deleniti qui necessitatibus expedita alias. quia similique ab natus quos sequi dignissimos nisi porro.
</div>
<div class="main">
lorem ipsum dolor sit, amet consectetur adipisicing elit. illo ratione aliquam odit amet suscipit consequatur delectus exercitationem ipsam quas, unde sunt corporis minima quidem, repellendus in harum adipisci dignissimos dolore cupiditate error similique iste blanditiis! porro fuga, accusamus sequi nihil distinctio voluptatem facilis id obcaecati dolorem est minus cum ipsam aliquam quae eum atque provident ab inventore exercitationem? eveniet similique distinctio repellat, quidem autem nisi, sapiente optio, id adipisci iste natus quia placeat eos recusandae in impedit? totam sed nisi repellat! numquam nesciunt sequi maxime nulla quidem animi impedit fugit cupiditate minus perferendis, ipsum, doloremque omnis dolorem, aut nobis accusamus porro iste? nihil nobis nostrum, deleniti non impedit quasi tenetur? nihil saepe delectus commodi quidem ut ducimus doloribus facere similique impedit dolorem labore molestias, dolore quia vel nisi eveniet laborum nostrum voluptatibus accusamus incidunt? nobis officia autem tempora itaque quaerat. officia alias eum vero quam ducimus? tempore, odio doloribus, at rem laboriosam quisquam distinctio, aliquid ipsam eaque quis quidem exercitationem. aliquam facere reiciendis voluptas accusamus unde consequuntur provident maxime deleniti dolorem ipsa sit voluptates odio, ex saepe culpa id dicta quaerat magnam recusandae. molestias, fuga nostrum expedita at cumque commodi facilis suscipit dolorum! reprehenderit cum, quia magni hic et neque laudantium voluptatem aperiam temporibus commodi modi alias sunt ut distinctio labore rem amet blanditiis esse adipisci molestias qui minima quisquam placeat porro? eveniet corrupti aut quia reprehenderit accusantium aspernatur vel ea rem iure cupiditate. rem placeat commodi odio hic vitae necessitatibus id accusantium aperiam facilis itaque. voluptate, corrupti. exercitationem quam veritatis molestiae, maiores vitae tempore ipsum unde ipsa ratione architecto iure praesentium dolore esse harum adipisci dolor ea voluptas deserunt nisi, ut eveniet? suscipit aspernatur aliquam ipsa fugit, consectetur repudiandae ipsum mollitia, non voluptates delectus reprehenderit, dolor vitae saepe! expedita aut unde ipsam quis sapiente. laudantium, deserunt cupiditate, fugit eum maxime ipsum rerum nulla similique ex magni voluptate nobis modi odit nisi architecto officia explicabo ea laborum perspiciatis expedita corporis! dolorem vel corrupti cumque, ratione earum quod nulla sit suscipit amet ea mollitia itaque voluptate tenetur consequuntur. sequi incidunt dolor laudantium sed? debitis accusantium, voluptas aspernatur mollitia cumque voluptates officia animi perspiciatis cupiditate fugiat! voluptatum tempora officiis cum cumque quo reprehenderit? porro quasi commodi, quaerat ab corporis laudantium, repellat aliquam culpa impedit harum animi voluptatem omnis quod rerum pariatur cum, officia unde nihil autem architecto doloribus. eveniet ad, animi quibusdam iste ipsum veritatis optio ea. odit tenetur neque minus blanditiis officiis tempore quo totam, officia in assumenda temporibus ea nesciunt quam. est at repellat corporis odit architecto tempora, neque commodi quos cumque! porro iure ipsa id temporibus. aperiam officiis temporibus ratione, similique nam voluptatem velit veniam quisquam, reprehenderit tempora, tempore soluta perferendis aspernatur tenetur? earum, ea quaerat? officia, enim cum! cupiditate eos et expedita qui voluptatem ipsa cumque incidunt voluptates a. ut, assumenda officia. tempore natus culpa odit iusto nisi. aspernatur architecto perferendis fuga beatae nobis nesciunt, incidunt, est maiores, tenetur labore necessitatibus alias veritatis! blanditiis, dolorem explicabo odit nesciunt voluptatem expedita, at perferendis provident omnis fuga unde ut neque ullam delectus nemo, totam repellendus quaerat nam! perspiciatis neque delectus quod nostrum incidunt placeat dignissimos provident. perferendis, blanditiis ullam excepturi quae, modi expedita sit adipisci rerum tenetur aliquam assumenda quas cumque quisquam, dolore laudantium error quis. blanditiis natus vel beatae velit aliquam corporis quia praesentium a veniam, dolore id qui quod adipisci. mollitia aliquid veniam iusto quos quis! repudiandae consequuntur enim aliquam perferendis nihil itaque. veniam nulla officiis fugit amet numquam praesentium maiores provident enim reiciendis a assumenda similique esse perspiciatis accusamus ea adipisci quo maxime pariatur, est explicabo consequuntur cumque? blanditiis similique animi perferendis, dolore vitae enim consequuntur id saepe tenetur officiis asperiores aut adipisci eos sit harum! libero, earum eos saepe maiores maxime atque est repudiandae ipsum asperiores, minus aliquam nisi ex enim nihil vitae officiis sit porro sed doloribus qui dolore numquam aperiam! nihil earum veniam facere quisquam mollitia, quaerat quas suscipit, error labore, sed alias aspernatur. iste nisi dolore eveniet pariatur similique mollitia enim illum, eos dicta cum sunt, rerum optio recusandae, dolorem dignissimos aliquid libero est accusantium dolor modi. doloremque adipisci accusamus fugiat, perferendis quas veniam quisquam quam esse hic voluptatem, neque explicabo expedita natus iste ipsam. exercitationem consequatur ratione quae. dignissimos optio odit quos eaque unde impedit in quod modi labore tenetur, ipsum numquam, tempore molestias delectus veniam reprehenderit cumque at minima? accusamus harum sapiente officia rerum nulla est laudantium dolor vero eos corporis! error repudiandae quisquam esse dolores libero ea excepturi nesciunt magni placeat. voluptatum dolorum, atque quam nisi perferendis iste. laborum aliquam blanditiis, praesentium deserunt repellendus debitis perspiciatis. sed saepe dolor perspiciatis dolorem, quam facere magni consectetur! sapiente eum, ducimus facere minus consequatur nemo ut error amet. illo temporibus aperiam suscipit vitae tenetur dolores, explicabo dolore, voluptate cum quam quae eius deleniti, ex alias quasi. aperiam perferendis dolores quasi, sit et in recusandae aliquam autem iste delectus quaerat similique eveniet itaque quas expedita temporibus ea non veritatis porro harum. laboriosam repellendus repellat quos maiores. temporibus placeat tenetur a repellendus, libero perspiciatis nihil nemo autem illum. praesentium, ad? officia asperiores sapiente laudantium fugiat dignissimos tempora nulla magni assumenda inventore? rerum repudiandae molestias omnis quas sequi, neque labore. totam beatae, eaque aliquid consequuntur nisi at non corrupti voluptas accusantium ipsam pariatur optio ipsum, adipisci dolorum numquam voluptatem. perspiciatis, fugit, quaerat sint doloremque consequatur nesciunt, soluta pariatur dolor iste maiores error! cupiditate ipsam sapiente mollitia saepe consequatur minus reprehenderit alias quia temporibus vero? praesentium quo eligendi excepturi, molestias deserunt optio, numquam quis fugit odit ad, ipsum voluptatum? dolore fugit sunt, perspiciatis animi id mollitia natus numquam sint culpa quidem incidunt ullam consectetur molestias ipsam laudantium repudiandae doloremque optio expedita! soluta, minima rerum voluptates nam autem repellendus, aliquid praesentium vel omnis harum laborum aspernatur. fugiat, neque molestiae assumenda sapiente animi eaque harum cum nisi vitae sequi veritatis error rerum tempora, modi at ipsam mollitia! voluptatibus dolorem maxime repellat eligendi iste, doloremque natus delectus corporis laborum exercitationem? fugiat, iste voluptatem nemo similique quidem, voluptate laborum perferendis dolores facilis debitis officia a nobis quos alias enim commodi quibusdam.
</div>
</div>
</div>
</body>
</html>
展示效果：