布局
多栏布局
两栏布局
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background: lightblue;
/* width: 1000px; */
width: 90%;
margin: 0 auto;
/* 盒子居中 */
}
.aside{
float: left;
background: lightcoral;
/* 浮动标签的宽度适应内容，所以撑开了整个，解决办法是定宽 */
width: 300px;
margin-right: 30px;
/* 应该设置这里的margin-right来设置空隙 */
}
.main{
overflow: hidden;
/* float: right; */
background: sienna;
/* width: 600px; */
/* 如果这里定宽的话，随着页面的缩小（container设置为90%），他可能会下去，解决办法是，设置overflow:hidden，BFC会躲避浮动盒子 */
}
/* 左右两边如果要定宽的话，使用浮动，不定宽的话，使用 overflow: hidden; */
</style>
</head>
<body>
<div class="container clearfix">
<div class="aside">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quidem eaque, vero pariatur, non quisquam quas tempore rem velit similique voluptates odit consequuntur unde aspernatur nobis illo in quo sit. Voluptatibus consequatur, nulla modi vitae eveniet perferendis amet accusantium error vel maxime voluptatem perspiciatis. Consequatur tempore autem eius consequuntur enim cumque, quam, asperiores laboriosam doloremque laborum explicabo ratione aliquam sequi, repellat optio ipsum at modi. Iure sint omnis, consectetur sit adipisci cupiditate ipsa! Facere voluptatem exercitationem minima soluta dolorem natus veniam quo consequatur accusantium, veritatis aspernatur deserunt. Praesentium et eos nesciunt sit. Nobis consectetur sunt porro iusto tenetur quas quos nam, omnis repudiandae temporibus veritatis delectus, laudantium impedit ipsam sed deserunt nisi asperiores, reprehenderit beatae. Laboriosam repudiandae, atque excepturi dolorem ad asperiores iure eaque non, nesciunt magni quibusdam quaerat officia laudantium impedit nobis quis accusantium ipsam nulla culpa delectus? Ullam natus nam non, necessitatibus sequi, doloremque at iste sunt dolor ipsa earum. Impedit libero officiis corrupti maiores quod in eaque quaerat iusto architecto tempore unde iure possimus ipsum laboriosam quasi inventore consequuntur consectetur, eligendi magnam deserunt quidem. Quos assumenda saepe officiis inventore, dolorem atque voluptatem exercitationem cum dolorum deleniti. Necessitatibus facere fuga corrupti ipsum reiciendis earum deleniti distinctio, nam explicabo excepturi ipsam dolor quaerat animi. Quidem sit at veniam adipisci explicabo voluptas delectus? Quisquam voluptatem nostrum error possimus. Deleniti at eligendi, rem ab iusto accusantium culpa nisi natus nulla consectetur perspiciatis error quas dolor quaerat ipsum? Corporis, sit provident atque totam necessitatibus porro commodi esse! Deleniti eligendi qui molestiae consequatur perferendis quae laboriosam laborum at quos. Quasi, laudantium id! Labore tenetur neque eos reprehenderit dolorum temporibus quod eveniet ipsa aut aperiam quam molestias sed impedit inventore porro, nesciunt, rem ea expedita error totam quasi amet saepe deserunt soluta? Voluptas ea, distinctio dolores in dolorem natus repudiandae vitae dolore maiores aliquid nisi at atque officia dolorum laborum, tempora nulla? Atque rem molestias consequatur exercitationem similique ex commodi? Minima doloribus ab, modi, error soluta harum fuga, fugit perspiciatis voluptatum similique reprehenderit! Repellendus eum explicabo minus repellat maxime natus autem aut reprehenderit itaque amet aliquam incidunt maiores eaque, nemo debitis, commodi cum, doloremque molestias odit placeat magni veniam dolore dicta. Alias incidunt officia a sapiente consequuntur vero, beatae sunt enim nesciunt doloribus ex consectetur libero nemo aperiam, ipsum quibusdam molestias hic. Error saepe nisi ducimus esse suscipit velit repudiandae quae. Facilis itaque dolorum illum atque. Maiores sapiente nobis hic aliquid tenetur ad laboriosam dolorem harum architecto incidunt impedit voluptas pariatur, accusamus quo illum iste, minima nam excepturi sed totam ut et numquam quam. Velit explicabo repellat eligendi dolorem fugiat quisquam temporibus beatae aliquam. Possimus harum deserunt sed at exercitationem explicabo quia ex illum in veritatis, itaque laboriosam laborum reiciendis expedita distinctio corrupti, ea voluptates obcaecati doloremque assumenda culpa libero aliquid. Minima ipsam unde neque at voluptatibus tempore reprehenderit dolor consequuntur aspernatur corrupti laboriosam natus fuga, deleniti nam voluptate accusamus tenetur magnam id sequi et illo. Quo, alias. Molestias unde quibusdam dolorem incidunt fugiat ipsum sit tenetur a quam illo ea quae natus, minus laboriosam alias quidem eum hic sequi consequatur ipsa maiores nobis? Sint, itaque nihil, laborum explicabo beatae eum cupiditate labore aut, qui incidunt perferendis harum accusantium eos. Voluptas asperiores eius minima amet expedita quis porro, recusandae neque saepe soluta, cum molestiae corporis quia, molestias sapiente quo aliquam consequuntur. Doloribus, quae aliquid. Adipisci, vel libero? Non dolore beatae ullam magnam asperiores consectetur numquam libero nesciunt dolorem corrupti et unde molestiae perspiciatis, quaerat quisquam, nisi eum totam saepe culpa eligendi officia quos voluptatum magni iusto. At iste ab in illum libero consectetur mollitia voluptate veniam recusandae aperiam? Obcaecati ducimus laboriosam dicta, ad quo recusandae eius totam ea praesentium maiores vitae provident, fuga ipsa aperiam voluptatem, natus eveniet minus libero deserunt rerum delectus exercitationem soluta illo? Quaerat tempora aspernatur odio hic molestias incidunt, animi a. Laudantium vel magnam adipisci distinctio soluta eligendi fugit numquam facilis at provident eos perferendis illum officia inventore modi rem, incidunt, perspiciatis, necessitatibus harum quod ad dolorem. Debitis, veritatis enim. Deserunt assumenda nisi nesciunt reprehenderit eos nam voluptatem, necessitatibus tempore animi, praesentium ex id molestias voluptas beatae voluptatum esse dicta excepturi est ut aspernatur, ratione quam. Eius dolorum est quo aliquam reprehenderit dolorem. Eaque architecto veritatis non natus cumque repellat odio voluptatum praesentium quae perspiciatis voluptatibus minus beatae sequi sunt, omnis harum aperiam illum quasi maiores sed sit, in, libero mollitia quas. Totam, soluta. Voluptate, enim numquam. Eius sed numquam accusantium, ea laboriosam facilis natus quos ex consequatur amet possimus aliquam labore ducimus eum qui, hic magnam esse quaerat itaque explicabo adipisci assumenda saepe. Quasi, beatae! Laudantium ut eligendi cum quisquam, atque, consequatur laboriosam magni rerum minus, alias aliquid sapiente neque exercitationem earum nihil eos voluptatibus delectus nisi inventore animi! Cupiditate eos ipsum culpa dignissimos qui similique voluptatibus sequi, recusandae odit totam facilis excepturi voluptates rem inventore quod sit quis, reprehenderit neque quia dicta accusantium, vero eum illo beatae. Eaque numquam labore maiores totam, deserunt quod repellat sit esse fuga quisquam aliquid, dolor dolorum obcaecati doloribus minima incidunt culpa quasi deleniti ipsum, tempora fugit nisi non iure. Repellendus corrupti reiciendis eius, accusantium eum, necessitatibus deserunt optio ratione quam unde aliquid possimus. Sit tempora sapiente dolor, sint, corrupti aperiam voluptatum officiis necessitatibus, placeat quia nihil harum reprehenderit mollitia quaerat at reiciendis natus dicta dolore voluptas. Dolorem nemo optio dicta, ea, iure impedit possimus iusto sit magni asperiores ducimus quis, quae deleniti esse animi officia. Dolorem aut magni, vel soluta molestias laudantium deserunt! Maiores facilis debitis fugiat provident, vel sunt eos eveniet dicta, atque ipsum modi earum cumque quasi architecto aliquam amet assumenda ullam, suscipit est quod obcaecati nihil iusto doloribus incidunt! Rerum, maiores quis. Omnis beatae maiores, nisi quis obcaecati, nostrum iusto natus voluptatum aut veritatis deserunt necessitatibus dignissimos tenetur quaerat odio. Sit ratione saepe odio harum sapiente consectetur tempora omnis cupiditate id recusandae rem laudantium magni, nisi earum accusantium non possimus eos impedit dolores. Assumenda delectus vero corporis fuga numquam perferendis, voluptatem ipsum, nostrum quam sapiente accusamus? Sunt, fugiat explicabo cum odit quaerat natus odio officiis architecto voluptatibus esse?
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aperiam facilis ipsa dignissimos nesciunt, pariatur voluptates adipisci dicta animi, repellendus fugit neque aliquam blanditiis a, quis repellat delectus veritatis porro quos doloribus! Eius accusantium aut rerum magni quibusdam? Excepturi mollitia ipsa incidunt tempore sit, sed harum debitis in architecto quasi voluptates laborum deserunt eaque illo. Minima placeat itaque quisquam voluptas qui provident laudantium ea laboriosam facere voluptate fugiat veniam maxime non neque quaerat consectetur totam architecto nobis cupiditate, commodi, sequi reprehenderit illum tempora? Reprehenderit, minus earum. Sunt nisi accusamus delectus dicta cupiditate quaerat possimus accusantium dolor nesciunt atque! Dicta explicabo cum eos sed sunt nemo odio quia esse placeat laborum doloribus eaque quaerat deserunt accusantium quisquam recusandae ratione voluptate, minus ad. Corporis provident tempora enim nihil deleniti minus praesentium perferendis quae vitae nulla debitis, qui perspiciatis rerum blanditiis, mollitia illo ab labore dicta atque aliquid ratione dolor nobis quia. Qui eligendi quas corrupti doloremque, odio nihil illum molestiae nostrum quibusdam blanditiis animi error nemo repellat asperiores nobis maiores eius incidunt? Debitis reprehenderit mollitia dolores ipsum praesentium odio neque quidem modi facilis quas deserunt ex qui expedita repellat perspiciatis corrupti, molestiae veritatis dolor sed ab nihil quam facere quaerat explicabo? Accusantium sit adipisci dolores voluptatem laborum. Dolores, nemo deleniti ad accusantium odit quis molestiae impedit dolorem laborum tempora voluptates alias soluta delectus nostrum necessitatibus quas, quod veniam vitae facilis, ipsum nobis? Impedit, cum doloribus est quidem nulla, animi unde ipsam cumque voluptate vero quas, velit id libero minima? Vel, nisi et. Illo, ipsam sunt itaque ex odit nulla soluta doloremque quibusdam maiores perspiciatis voluptatum consectetur. Aperiam, praesentium. Nihil fugiat dignissimos id inventore maxime dolor fuga. Corrupti est nemo numquam doloremque incidunt! Doloremque sequi, rem deleniti quae, voluptate, repellat ipsum impedit explicabo dolore eos error voluptatibus eaque! Laboriosam nobis dignissimos at omnis repellendus architecto recusandae, minus expedita excepturi, et nemo asperiores explicabo assumenda ullam qui accusantium eos unde perferendis vero. Eum, perferendis ad. Quia in ipsum laboriosam natus consequatur omnis quos. Perferendis illum repudiandae quis. Odio est officia facere inventore sapiente ex excepturi eaque delectus eum, dolores facilis quo natus iste ullam quia quas numquam perferendis! Expedita possimus, consequuntur, similique cupiditate totam atque hic dicta placeat aliquam ratione quos temporibus molestias, sequi veritatis assumenda perspiciatis quisquam dignissimos corrupti asperiores architecto fuga aliquid? Veniam culpa amet debitis quod incidunt asperiores in mollitia harum atque quaerat eligendi consectetur nemo ullam iure consequuntur, cupiditate provident iste recusandae repellat voluptatum tenetur assumenda voluptate architecto. Unde tempore voluptatem rem voluptates repellendus. Atque inventore rem sapiente accusamus animi saepe iure, reiciendis eveniet aliquid alias velit nobis eius esse! Sint aliquam id laboriosam provident soluta ullam similique quae eum in nihil iusto rerum delectus corporis nisi eos voluptatum distinctio, earum autem incidunt? Nemo provident aperiam officia. Nemo non velit error, eius sapiente illum deserunt officiis ullam ipsa blanditiis impedit voluptate facilis, quam in illo! Beatae ipsa illo recusandae, dignissimos voluptatum odio nemo, excepturi perferendis cumque obcaecati ipsum fugiat? Libero totam inventore asperiores sed at, doloremque, nostrum dicta, eveniet explicabo quod a possimus necessitatibus iure optio minus blanditiis officiis? Vel recusandae necessitatibus aperiam optio, accusantium repudiandae! Voluptas quis sed illum repudiandae! Quaerat, facilis. Veritatis libero voluptatibus dolorum alias maiores illo aperiam! Harum odio dicta ea magnam nulla fugiat nemo unde. Sunt provident ex neque cum iste repellendus nostrum, amet commodi, tempore animi mollitia facilis soluta ducimus ab aliquid unde cumque veritatis quaerat id corporis. Possimus doloremque a dicta laboriosam nostrum, dignissimos perferendis sit repellat, blanditiis deleniti optio! Et molestias explicabo sunt nemo recusandae eligendi distinctio consequatur ad magnam totam, libero pariatur aspernatur debitis impedit aut ex. Nemo quia reprehenderit pariatur neque ex. Sapiente officia in reprehenderit dicta dolores temporibus, cum debitis est rem repudiandae numquam voluptatibus accusamus consectetur iusto repellat quaerat iste nesciunt optio vitae, tenetur alias consequatur earum. Voluptatem expedita quibusdam neque culpa, consequuntur, reiciendis ipsa quod rem in aliquid natus beatae odio vel mollitia voluptatum quidem! Doloribus sequi, repellat veritatis autem harum quas asperiores, ex dicta aperiam, laboriosam itaque quibusdam labore earum mollitia veniam officia eos quasi cumque optio eveniet enim eum voluptate possimus voluptatum! Accusantium a sed eius nisi odio assumenda ipsam provident veniam voluptate nostrum ex molestiae corrupti sit fugiat quibusdam debitis saepe error, itaque dolor optio temporibus, blanditiis consequatur. Ipsum nulla sapiente quam sint doloribus ipsa quisquam accusantium magnam veritatis reprehenderit aperiam, tempore explicabo beatae. Qui tempore nisi necessitatibus minus impedit laborum sed consequatur mollitia minima vero? Nobis in voluptas error dolores ut quisquam, reiciendis libero non voluptates minus labore perferendis aperiam, iure similique harum nemo eligendi enim, officiis unde omnis exercitationem quos aspernatur? Animi asperiores quod voluptates! Ut consectetur nostrum ex est perferendis nihil excepturi enim. Nesciunt, quia soluta aspernatur exercitationem ipsam eaque mollitia recusandae saepe quidem! Ut dolorem eius fugit amet deserunt eum nobis quos labore odit. Cupiditate pariatur et illum tenetur. Harum incidunt, recusandae veritatis nesciunt unde beatae consequuntur suscipit. Cum illum voluptates placeat sequi? Ea, exercitationem esse rem facere expedita omnis dolorum commodi vel quam blanditiis iste, totam debitis quae facilis similique! Quis beatae quam et esse at perspiciatis ratione assumenda soluta reprehenderit ducimus corporis adipisci eveniet vero maiores consectetur nobis nulla explicabo reiciendis quo suscipit voluptas, in accusamus sit eaque. Optio tenetur deserunt vel, explicabo tempore ipsam ea illum harum voluptates! Totam non autem nisi veritatis earum, corrupti ratione necessitatibus quia iusto aut suscipit, quaerat excepturi consequuntur commodi dolorum labore sit. Minus nam explicabo mollitia quos accusamus, fugit necessitatibus ipsa. Soluta, debitis ullam! Quae id error accusamus dignissimos, consectetur aliquid officiis quo quaerat enim architecto aperiam quas corporis dolorem beatae, tenetur repudiandae maxime alias unde, ducimus cum aspernatur temporibus ex! Reiciendis in adipisci cupiditate ea laudantium officia quaerat ut fugiat architecto quisquam doloribus deserunt mollitia amet sed dolorum, porro commodi tenetur nulla totam molestiae itaque facilis iure consequatur dolorem! Doloremque saepe adipisci ullam numquam vel ab, aut corrupti at laborum minus amet, sed ad ducimus assumenda itaque voluptates neque eaque maxime. Est accusamus fuga maiores sed esse ipsam voluptates consectetur incidunt. Sunt numquam hic officiis quo esse incidunt. Magnam, veniam?
</div>
</div>
</body>
</html>
三栏布局
<style>
.clearfix{
content: "";
display: block;
clear: both;
}
.container{
padding: 30px;
border: 3px solid lightblue;
}
.left{
float: left;
background: lightcoral;
width: 300px;
margin-right: 30px;
}
.right{
float: right;
background: sandybrown;
width: 300px;
margin-left: 30px;
}
.main{
overflow: hidden;
border: hotpink 2px solid;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi fugit deserunt voluptates omnis, alias, doloremque fuga ad eaque, quia corporis adipisci! Facere exercitationem corrupti natus nulla sapiente voluptates ex ratione voluptate in laborum vel, alias saepe aliquam libero quibusdam possimus itaque animi culpa voluptatem! Laudantium tempore maiores voluptatem, et cum veniam assumenda iste quisquam optio vel enim voluptates quam, ipsa doloribus! Recusandae totam veritatis expedita debitis delectus consectetur assumenda commodi dolores nemo dolore sint ut rem provident, possimus doloribus, dignissimos quidem at aliquam iste minima. In magnam dolorem dicta quaerat saepe quia voluptatem, amet soluta quibusdam, labore impedit dolore tempore omnis? Est, vitae. Quia corporis pariatur expedita recusandae aut. Ullam, nam ipsam ipsa in minima autem ex optio aut, at exercitationem atque. Veniam autem nobis omnis consequatur dolorem earum blanditiis numquam culpa vero. Quos aliquid ad molestiae nobis incidunt optio exercitationem quidem necessitatibus iusto. Ipsa commodi quidem, veritatis rerum eveniet eaque natus laudantium tempora eius rem suscipit sunt provident dolores nobis officia, quisquam eligendi! Tempora, recusandae dicta exercitationem necessitatibus architecto tenetur? Officia perspiciatis expedita, omnis ipsum, unde voluptatem iure molestias ratione asperiores et perferendis quae odio exercitationem at dolorum fugiat adipisci harum amet magnam! Rerum tempora repellendus sapiente animi ea, voluptatum possimus saepe fuga. Quaerat cumque recusandae ipsam, perferendis sit voluptate eius pariatur non magni rem repudiandae? Blanditiis, fuga adipisci. Aliquid vero aut fugit quo expedita, provident explicabo magni alias officiis quaerat vitae eaque dolorem deserunt iste quod totam corporis optio deleniti quisquam. Est esse a, fugit voluptatem exercitationem debitis ratione. Quos eligendi maiores et ad vero iste deleniti voluptate molestias iusto! Laboriosam maxime illum at consequuntur eligendi. Exercitationem doloribus aliquid cum suscipit aspernatur eius labore placeat a culpa tenetur iure deserunt at beatae sunt, impedit nisi, animi omnis id reiciendis ullam, voluptas quas aliquam! Est neque eveniet facilis asperiores quae consequatur inventore, blanditiis dignissimos. Nulla doloribus sequi eos neque tenetur numquam error ratione molestiae dicta voluptatum porro expedita corrupti excepturi eum, saepe sit. Sed beatae fugiat enim consequatur molestiae, suscipit explicabo voluptatem ad non quod, obcaecati quae eveniet ipsa amet velit commodi. Dicta odio quasi id vitae ab dignissimos, provident doloribus delectus corrupti doloremque assumenda molestiae ratione nobis vero dolorum vel atque suscipit. Voluptatum temporibus dolore id alias voluptate in neque nemo libero eligendi illum consectetur fuga saepe eos sequi at ex dicta iusto dolorem ab sed, harum suscipit omnis velit esse! Dicta sint libero atque sunt voluptate mollitia doloremque magnam a. Dolorem quibusdam quod porro repellat, velit quaerat a natus excepturi unde at officia dicta ipsum, quia corrupti, nesciunt minus non. Illum eaque odio quod obcaecati doloribus, similique dolore. Rem reiciendis quibusdam voluptatem mollitia numquam similique placeat asperiores excepturi voluptatibus tempore voluptates, veniam, ab minima cumque, adipisci enim maiores consequatur quo qui sequi tenetur molestiae? Mollitia unde ad, alias non cupiditate ut et libero accusantium neque dicta? Corporis consequuntur nostrum excepturi velit. Quae et assumenda omnis corrupti quam hic nostrum nulla provident, autem sapiente unde voluptatem distinctio alias a eaque dolor praesentium dolorem ad quo. Aliquam, velit. Voluptatum minus, doloribus deserunt impedit est nulla ullam eaque quasi quisquam! Inventore, quidem! Cum ipsam porro pariatur nihil minima nobis consequuntur mollitia laborum autem, quasi debitis facere consequatur minus quos ullam, fugit fugiat repellat eaque recusandae perspiciatis. Culpa corporis earum quaerat repellendus sint voluptate iure eum nihil tenetur error quo facilis aperiam quia ipsum dolor illo optio illum libero, exercitationem repellat repudiandae laborum minima in placeat. Excepturi numquam tempora, nihil maxime culpa error repudiandae, eius iste ipsum ad dolor ipsam tenetur ducimus dolores rem quis accusantium et, eos animi? Voluptate quo suscipit ad, blanditiis amet aut ducimus tenetur placeat pariatur fugit quod itaque eaque repellat eos recusandae ea voluptatum iure nihil, dicta doloribus. Itaque amet, magnam eum corporis quidem sequi soluta vero deleniti est aliquam dicta fugit quod delectus quasi velit! Illo ipsa dolorum perspiciatis illum, assumenda porro repellendus modi eligendi id, hic vero! Veritatis maxime libero vero, sit officiis nobis eius excepturi ex perferendis id pariatur, minus qui rem. Totam, asperiores! Dignissimos, enim voluptatibus! Deleniti beatae repellat, cumque nesciunt perferendis, aspernatur asperiores nemo ab nam tenetur accusamus autem repellendus praesentium inventore atque sit commodi reiciendis alias dolorem voluptas a excepturi recusandae? Cumque accusantium aliquam, sint ipsam nesciunt similique corporis saepe veniam harum asperiores minima nobis officiis iste voluptate. Perferendis consectetur magni voluptatibus voluptatum hic vel, exercitationem in cumque accusantium blanditiis magnam iure laboriosam, atque quam libero. Sint doloremque nihil commodi, ea aperiam, consectetur sunt ipsa fugiat at corrupti delectus. Eum maiores a deleniti quis minus accusamus eos, libero perferendis rem veniam tempore mollitia? Nam, accusamus eaque! Officiis ipsa animi dolorum corrupti illum inventore porro tempora incidunt esse. Vitae, quas expedita facere necessitatibus distinctio impedit error perspiciatis! A ducimus, nesciunt vitae impedit sed culpa necessitatibus, incidunt quia sapiente doloribus consequuntur facere ratione, tenetur dolore? Quos amet odio rerum quas magnam perspiciatis animi earum saepe! Dignissimos sint quasi minus eum odio, cupiditate in enim dolor ipsam corrupti vitae eos ipsa. Iste similique esse ab. Iure possimus veniam numquam reprehenderit quia hic ipsam accusantium sit, quod quas adipisci illo magnam odio error exercitationem aut excepturi fuga, maiores reiciendis blanditiis fugit atque explicabo libero! Excepturi placeat odio beatae, ducimus quam distinctio reiciendis consequatur, eius dignissimos, nisi repellat eos minima assumenda harum aperiam odit aliquam eum? Excepturi quas eum aliquid quam perferendis incidunt laudantium sapiente, quia similique veritatis non laboriosam rerum earum ipsam eaque deleniti iure maiores ea quidem enim facilis. Inventore, est ducimus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam culpa dicta unde alias saepe maxime facilis! At porro eos ratione vel, quam libero cum animi culpa quo ullam tenetur nobis similique et nisi hic dolore deserunt. Asperiores voluptatibus perferendis dolore ut laborum facere, natus accusamus maxime explicabo, assumenda quis nostrum? Ratione blanditiis commodi reiciendis fugit deleniti enim dicta vero consectetur quae a sunt quis quaerat iusto, natus illo laborum, eligendi architecto magni! Corporis iure officiis suscipit accusantium voluptatibus repellat quibusdam nostrum nemo rerum eos amet molestiae placeat tenetur, saepe, autem, harum distinctio fugiat. Libero eius repudiandae voluptatibus architecto, beatae eum.
</div>
<div class="right">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias reprehenderit maxime mollitia quia aliquam quisquam debitis, incidunt in aliquid. Inventore eaque iste provident, tempora modi aperiam facere ut nesciunt explicabo expedita ad at, nobis dolorum, quos aspernatur optio a? Quia vel nihil cumque quas saepe cum quasi delectus blanditiis inventore cupiditate corrupti quibusdam ad sunt ipsam voluptates a laboriosam expedita accusamus, illo esse. Ad delectus, ducimus ea fugiat at accusantium! Ducimus consequuntur non facilis vitae porro provident, eos impedit. Officia temporibus quis aperiam accusamus, incidunt blanditiis aliquam asperiores omnis explicabo facere natus necessitatibus nobis porro molestias, laboriosam voluptatem a, eum ipsam? Corrupti fugit nam nostrum quaerat quam praesentium saepe ab doloribus sint. Alias reprehenderit autem debitis doloribus pariatur recusandae quas nam aspernatur, quo quod in facilis. Similique tempore voluptas maiores amet, quaerat quae iure dolorum blanditiis voluptatibus, repudiandae totam eaque itaque dicta in consequuntur delectus molestiae minus quia est impedit facilis dignissimos, molestias soluta. Voluptate labore aspernatur blanditiis, quas, vel tempora repellat facere rem corporis, odio ab voluptatem. Amet modi maiores veniam voluptate laboriosam nemo aliquid id doloremque in natus eum excepturi laborum repudiandae suscipit accusamus sunt, eveniet debitis veritatis maxime praesentium deserunt enim obcaecati? Officia minima pariatur non iste, atque laborum hic harum iusto, voluptatibus cum explicabo unde asperiores, vel expedita reprehenderit quisquam ipsam quidem illo quas odit. Neque asperiores eaque doloribus possimus modi dolor quaerat. Tempore cumque maiores labore consequatur doloribus minima itaque qui accusamus impedit illo dolores perferendis deserunt eum expedita eaque porro recusandae quae nemo sed voluptatibus suscipit, saepe natus numquam ipsam. Eius ullam ea nobis aperiam possimus esse libero eaque harum labore provident, repellat voluptatibus laudantium repellendus porro in, magnam aliquam earum modi dolorum? Tempora molestias, eligendi ea nemo magni culpa aliquid! Autem aspernatur, commodi accusamus sunt magni sit minima voluptatem inventore. Accusamus est esse voluptate error? Qui quam natus autem maxime at. Quia, delectus? Facilis minima ut, debitis dolores vitae doloremque id atque iusto, quod nostrum explicabo impedit, quam ducimus enim earum maxime perferendis. Libero placeat porro officia nobis magni voluptatibus quia eveniet quasi? Nostrum, saepe possimus adipisci nam explicabo rerum animi unde ratione eveniet consequuntur necessitatibus. Dolore aliquid adipisci atque eos a, animi modi odit, fugit repellendus ipsum nisi nulla nemo quas facilis doloremque cumque dolor neque sapiente? At dicta illo quasi voluptas mollitia! Harum, rerum? Eligendi voluptas aperiam iure est recusandae nisi inventore quod deserunt adipisci ratione, id consequatur accusantium vitae quae ut unde sint incidunt pariatur architecto eum? Ratione quam autem veritatis quis, odit libero numquam a blanditiis ad est? In obcaecati perferendis quas fuga earum. Necessitatibus possimus aut perferendis ipsum non quas aliquid quidem quis delectus, explicabo unde aperiam reprehenderit corporis ratione similique obcaecati. Rem mollitia a voluptatum exercitationem optio voluptates asperiores, qui consequuntur aliquid, deserunt id quisquam omnis odit veniam temporibus quis, voluptas quidem obcaecati similique. Iusto soluta omnis veniam blanditiis hic reprehenderit cum, doloribus temporibus eius amet ad aspernatur similique. Cum, quia neque ratione soluta quibusdam blanditiis vel reiciendis inventore eveniet modi harum magni repellat libero tempore qui quasi est voluptas cupiditate asperiores, cumque aliquam totam, dolores perferendis! Assumenda quisquam maiores asperiores quasi obcaecati sit, aut alias voluptatem dolore. Nihil corporis optio molestias labore, minus, vel molestiae perferendis fuga asperiores ex beatae quia corrupti inventore quae? Asperiores vero natus iusto assumenda dolor. Dolorem soluta expedita fuga magni voluptate ratione molestiae nam tenetur enim quae? Atque cumque impedit cum ab hic porro commodi. Odio ducimus laudantium, ab tenetur veniam reiciendis quis deleniti illum vel debitis nemo quaerat laboriosam maxime iure aliquam, accusamus eligendi quidem labore! Molestiae itaque numquam suscipit a deleniti quisquam omnis dolor nesciunt hic facere quis, eveniet nobis ab expedita aliquid repudiandae exercitationem eum est delectus enim quae possimus, doloribus minus modi? Omnis dolorum expedita, fugiat sequi debitis aperiam aliquid ad quas doloribus illo aspernatur temporibus non a, eaque itaque ipsam. Provident, perspiciatis. Veritatis labore, possimus beatae eaque, vero repellendus voluptas quibusdam nobis porro optio magnam quaerat consequuntur aliquid sed tempora sapiente! Voluptates maiores a soluta nemo ex eaque voluptatem officia placeat, alias quo necessitatibus minus, explicabo quidem nostrum esse, ratione doloribus! Amet, nostrum saepe, rem et eligendi reiciendis quod obcaecati adipisci, vero maiores deserunt exercitationem. Vitae nihil est minima, dolore iure placeat libero vel nulla repellat magnam optio dignissimos ratione natus sequi ipsam, quis autem culpa delectus accusamus praesentium sit commodi deleniti reprehenderit ipsa? Mollitia, deleniti nobis! Reiciendis voluptatibus odit, dolorum voluptatum itaque distinctio quos corrupti recusandae aliquid alias fuga nam dolores, quaerat aspernatur eligendi possimus iusto corporis, atque quo cum qui. Harum aperiam aut atque architecto, eum ratione in, omnis ipsam non libero consectetur, unde similique alias reiciendis exercitationem sequi minus. Reprehenderit, ducimus doloribus adipisci tempore similique corporis. Ab illum quisquam rem fugiat? Cumque iure odit qui modi eos labore libero sunt quia ut ipsam architecto laboriosam voluptatem, natus vitae alias non voluptates aliquid similique sapiente, temporibus provident sed id. Dolore, rem quas ad enim iure dolor veniam. Omnis quasi corporis vero illo. Reprehenderit, odio soluta, consequuntur obcaecati minima unde rerum repellendus nobis voluptas, porro facilis ullam culpa a eligendi natus amet repudiandae? Atque dolor aperiam tempora a eum itaque nobis molestiae dignissimos delectus facilis ducimus corrupti modi ea velit soluta porro veniam nam voluptas perferendis odio, architecto natus distinctio! Qui libero autem nostrum ratione soluta ipsum beatae ab aliquam aut reprehenderit quos sequi laboriosam laborum nemo a totam dolore voluptates, vero voluptatibus sed placeat nulla veritatis? Quasi pariatur, autem temporibus voluptatibus cum exercitationem expedita cupiditate saepe? Aut illum, iste distinctio maiores exercitationem earum sapiente dignissimos, quisquam adipisci dicta blanditiis. Corrupti quidem ea labore possimus hic cupiditate itaque doloribus odit excepturi, culpa delectus molestiae suscipit earum esse tempora harum? Alias modi odio magni quod voluptas eius porro unde sed, quia nemo. Eligendi maxime, ex illum et animi alias quasi aut earum aperiam officiis non commodi impedit, laboriosam aliquam ad repellendus suscipit inventore est eveniet quidem! Placeat, repellendus sunt adipisci delectus asperiores nulla magni eius, voluptatum laboriosam dolor quae iure minus deserunt officiis, modi soluta. Vitae ipsa eaque quibusdam ea quos veniam doloremque repudiandae consectetur iusto.
</div>
<div class="main">
<!-- 这块似乎避开了浮动标签，其实没有，行盒会避开，文字会自动生成一个匿名行盒，所以这里看起来像,解决办法是设置overflow:hidden -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos tempore corporis non repellendus, labore facere illo delectus consectetur tenetur qui exercitationem debitis soluta magni repudiandae, et quis iure aliquam nisi voluptatibus quae, aliquid fugit. Architecto dolorum possimus sit eius odio, alias, expedita ipsa, quasi consequuntur aliquam earum molestias id aliquid voluptatem libero? Illum autem optio consectetur unde labore ipsum dignissimos cum eaque, doloribus cumque minus, quos amet soluta ipsam odio quia. Rem facere iste tenetur suscipit mollitia laborum enim harum officiis deserunt? Pariatur culpa recusandae vero velit earum tempora minus similique sunt animi iure architecto commodi aut ipsam exercitationem, accusantium error magni at dicta provident quae cum quaerat magnam necessitatibus soluta. Aut placeat dolor vero fugiat ad officiis voluptatem dolorum. Hic iste, quidem, placeat adipisci consectetur ratione quia labore quo cupiditate eos iusto debitis explicabo! Repudiandae, similique nesciunt natus ea possimus dolores ipsam nostrum assumenda, perspiciatis, autem reprehenderit minima laboriosam ratione eos! Natus necessitatibus laborum fuga! Eveniet iste tempore non omnis illum, suscipit nostrum. Distinctio eaque laudantium voluptate pariatur placeat fugiat eos quis suscipit, sequi ex temporibus error accusantium repellat perferendis cupiditate omnis molestiae numquam, reiciendis, aliquid deleniti nulla earum sunt quia. Quia voluptate adipisci facilis fugit animi nesciunt! Excepturi dignissimos praesentium cupiditate similique delectus magnam architecto impedit ducimus. Ab amet culpa repellat, quaerat dignissimos nobis quasi deserunt eligendi, accusantium natus non cumque dolores itaque beatae ad nam. Explicabo dolor quam voluptatem aliquid voluptates cupiditate exercitationem sapiente praesentium nobis ipsam? Necessitatibus repellat blanditiis omnis minima hic architecto eligendi eos error sed obcaecati laudantium quidem, in molestias nostrum eveniet? Nihil qui eligendi voluptate ducimus et excepturi ea, hic dignissimos ut dolores reiciendis illo delectus laudantium enim repellat! Magni dolore quibusdam tempora non laudantium officia quo, autem dolor sapiente quas maiores neque maxime accusamus, magnam asperiores esse? Voluptatibus molestias quae quam consectetur id labore vero quas praesentium dolorum. Perspiciatis quos rerum distinctio deserunt a alias ipsa fugit rem error. Aspernatur labore nobis ad id enim, animi odio reprehenderit facilis itaque nihil facere. In eum possimus suscipit dolorum magni placeat laboriosam voluptates voluptas, unde mollitia nisi earum, accusantium cupiditate deserunt corrupti temporibus? Voluptatum ex dolor accusamus officia voluptate, repellat et exercitationem eveniet nesciunt, nam velit recusandae eos voluptatem minus non sunt esse saepe odio necessitatibus possimus ab suscipit doloremque? Iusto fuga soluta ducimus error molestiae quia nemo modi? Vero dolorum veritatis similique harum, natus voluptatum praesentium maiores minima! Eius illo possimus accusantium ducimus sint? Reiciendis similique illo quis placeat veritatis. Nesciunt dolore totam perspiciatis ullam laboriosam labore soluta magnam sequi similique non reiciendis mollitia, nemo tempora quibusdam exercitationem et error voluptas quidem incidunt fugiat eligendi eos enim qui ut. Optio laborum officia repellendus, vero consequatur sapiente cupiditate id eaque et perspiciatis dolor impedit aliquid recusandae velit dignissimos esse architecto nemo quaerat nulla nihil facere? Autem voluptatem beatae voluptas optio ex, et voluptatum vitae laudantium repellat? Architecto nemo odio ad praesentium enim adipisci unde voluptatibus distinctio, esse quibusdam assumenda, at eligendi rerum! Dicta, dolore eligendi ipsum reprehenderit enim, voluptas blanditiis praesentium voluptatibus, quisquam quo vel perspiciatis voluptate voluptates ad culpa minima quia mollitia est doloribus consectetur iure aliquam laborum animi? Totam, id? Officia facere dignissimos quibusdam dolor unde, a autem. Et ab quam similique animi officiis illo, repudiandae harum magni esse id dolores quod! Explicabo, quis enim iste, animi molestiae perspiciatis similique, architecto exercitationem dolores itaque optio ducimus. Impedit labore ut reprehenderit officia? Ipsa provident, autem consequuntur ratione repellat molestias atque numquam expedita dolorem soluta excepturi aperiam labore molestiae consectetur blanditiis doloremque quidem hic! Repudiandae magni reprehenderit ullam tenetur labore dolor maxime ut sequi earum nobis! Temporibus quas delectus illum neque, vel, iusto vero atque, mollitia provident a aperiam ullam hic. Praesentium ea reiciendis consectetur corrupti ducimus ipsam dignissimos possimus eaque sed reprehenderit cumque ad, voluptatibus delectus? Officiis id exercitationem, fuga fugit alias necessitatibus aut at placeat perferendis qui nesciunt rerum accusantium laboriosam obcaecati quo velit cumque. Alias praesentium culpa laboriosam velit adipisci fuga? Corrupti laudantium, itaque nesciunt animi voluptatem, earum officiis eum illum autem id, omnis doloribus commodi debitis! Perferendis magni quos eaque ut natus dolores neque quasi iste nemo doloremque, dicta qui mollitia facilis asperiores quas est, atque corrupti, itaque amet a aliquam accusamus. Corrupti nam consequatur dignissimos. At eligendi, impedit odio voluptatum facere distinctio. Quia harum minus velit qui totam excepturi inventore modi odit rerum voluptates consequatur impedit, placeat architecto fuga iusto voluptatem quam id quasi quaerat, ratione eum! Inventore nisi delectus fugit hic maiores consequuntur! Cum dignissimos culpa eum at excepturi eos labore quasi officia laborum. Ratione fugit totam dolores, vel eaque natus facere voluptatum corporis repudiandae vero libero? Quas optio tempore itaque id obcaecati odio deleniti facilis tempora eius dolor excepturi incidunt distinctio quod unde beatae ipsum doloremque, consequatur, expedita inventore ipsa. Quidem aliquam atque, dicta cumque quibusdam nihil ut porro, temporibus quo ipsam commodi dolores at eaque corporis. Rerum, consequatur repudiandae. Saepe nihil aliquam cupiditate ut officia praesentium laboriosam maiores aut, tempora deserunt dolor, optio quia. Voluptatem repudiandae a, voluptates quis eum corporis eius sed aperiam, dignissimos voluptate deleniti ex, fugit facilis! Alias, eveniet officiis earum quod in sequi, neque quidem debitis natus aperiam, voluptatibus perferendis! Distinctio, culpa facere corrupti cumque, tempora praesentium dolorem maiores, aspernatur mollitia error ut? Consequuntur repellendus earum beatae qui quo nisi eum, iure placeat sint aliquam. Minus autem culpa labore nesciunt accusamus aperiam ad vel! Soluta alias dolores ipsa autem blanditiis consequuntur est, aut voluptatum impedit libero velit tempora expedita sit adipisci quia recusandae? Ipsum nostrum facere doloribus quisquam delectus quod molestias corrupti quam quo, ullam blanditiis reiciendis sunt fugit repellendus illum velit asperiores numquam expedita error vitae, tenetur obcaecati. Voluptates, necessitatibus voluptas. Quasi corporis esse quas obcaecati illo saepe perspiciatis, facilis deserunt suscipit, ratione molestias consectetur voluptate eveniet officia recusandae in distinctio fugiat amet at harum dolor optio quae rem. A nihil, nulla consequuntur aliquid laboriosam quisquam dolorum earum dolores possimus consequatur eum officia natus, voluptate laudantium repellendus, quas quos impedit dicta neque aliquam. Omnis placeat illum hic! Reprehenderit voluptate provident est! Est veritatis mollitia reprehenderit illum nobis perferendis voluptate et eaque?
</div>
</div>
</body>
</html>
等高
1.css3的弹性盒
2.js控制
3.伪等高
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background: lightblue;
/* width: 1000px; */
width: 90%;
margin: 0 auto;
/* 盒子居中 */
overflow: hidden;
/* 外面盒子溢出隐藏，但如果主区域内容不够的话，侧边栏的内容也就不会显示了 */
}
.aside{
float: left;
background: lightcoral;
/* 浮动标签的宽度适应内容，所以撑开了整个，解决办法是定宽 */
width: 300px;
margin-right: 30px;
/* 应该设置这里的margin-right来设置空隙 */
height: 10000px;
margin-bottom: -9990px;
/* 盒子实际高度只有10px，避免外面盒子被撑的很开 */
}
.main{
overflow: hidden;
/* float: right; */
background: sienna;
/* width: 600px; */
/* 如果这里定宽的话，随着页面的缩小（container设置为90%），他可能会下去，解决办法是，设置overflow:hidden，BFC会躲避浮动盒子 */
}
/* 左右两边如果要定宽的话，使用浮动，不定宽的话，使用 overflow: hidden; */
</style>
</head>
<body>
<div class="container clearfix">
<div class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos cum ea quaerat nemo explicabo maxime illum consequuntur eius adipisci! Rem voluptatem accusantium eos exercitationem a necessitatibus? Necessitatibus maxime iste nulla aperiam officiis numquam animi? Vel dolore illum corrupti! Magnam sapiente voluptates aperiam. Illum molestias vel harum magnam architecto dolorum possimus numquam repudiandae inventore quisquam nulla sunt exercitationem dolorem reprehenderit explicabo libero iure voluptates dignissimos iste quo, vero eveniet quaerat incidunt illo? Suscipit praesentium cum adipisci voluptate aliquid placeat, alias iure quod veniam, vitae quae ipsum eaque doloribus molestias nisi? Blanditiis qui eum ad commodi. Dignissimos at assumenda accusamus odio placeat!
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aperiam facilis ipsa dignissimos nesciunt, pariatur voluptates adipisci dicta animi, repellendus fugit neque aliquam blanditiis a, quis repellat delectus veritatis porro quos doloribus! Eius accusantium aut rerum magni quibusdam? Excepturi mollitia ipsa incidunt tempore sit, sed harum debitis in architecto quasi voluptates laborum deserunt eaque illo. Minima placeat itaque quisquam voluptas qui provident laudantium ea laboriosam facere voluptate fugiat veniam maxime non neque quaerat consectetur totam architecto nobis cupiditate, commodi, sequi reprehenderit illum tempora? Reprehenderit, minus earum. Sunt nisi accusamus delectus dicta cupiditate quaerat possimus accusantium dolor nesciunt atque! Dicta explicabo cum eos sed sunt nemo odio quia esse placeat laborum doloribus eaque quaerat deserunt accusantium quisquam recusandae ratione voluptate, minus ad. Corporis provident tempora enim nihil deleniti minus praesentium perferendis quae vitae nulla debitis, qui perspiciatis rerum blanditiis, mollitia illo ab labore dicta atque aliquid ratione dolor nobis quia. Qui eligendi quas corrupti doloremque, odio nihil illum molestiae nostrum quibusdam blanditiis animi error nemo repellat asperiores nobis maiores eius incidunt? Debitis reprehenderit mollitia dolores ipsum praesentium odio neque quidem modi facilis quas deserunt ex qui expedita repellat perspiciatis corrupti, molestiae veritatis dolor sed ab nihil quam facere quaerat explicabo? Accusantium sit adipisci dolores voluptatem laborum. Dolores, nemo deleniti ad accusantium odit quis molestiae impedit dolorem laborum tempora voluptates alias soluta delectus nostrum necessitatibus quas, quod veniam vitae facilis, ipsum nobis? Impedit, cum doloribus est quidem nulla, animi unde ipsam cumque voluptate vero quas, velit id libero minima? Vel, nisi et. Illo, ipsam sunt itaque ex odit nulla soluta doloremque quibusdam maiores perspiciatis voluptatum consectetur. Aperiam, praesentium. Nihil fugiat dignissimos id inventore maxime dolor fuga. Corrupti est nemo numquam doloremque incidunt! Doloremque sequi, rem deleniti quae, voluptate, repellat ipsum impedit explicabo dolore eos error voluptatibus eaque! Laboriosam nobis dignissimos at omnis repellendus architecto recusandae, minus expedita excepturi, et nemo asperiores explicabo assumenda ullam qui accusantium eos unde perferendis vero. Eum, perferendis ad. Quia in ipsum laboriosam natus consequatur omnis quos. Perferendis illum repudiandae quis. Odio est officia facere inventore sapiente ex excepturi eaque delectus eum, dolores facilis quo natus iste ullam quia quas numquam perferendis! Expedita possimus, consequuntur, similique cupiditate totam atque hic dicta placeat aliquam ratione quos temporibus molestias, sequi veritatis assumenda perspiciatis quisquam dignissimos corrupti asperiores architecto fuga aliquid? Veniam culpa amet debitis quod incidunt asperiores in mollitia harum atque quaerat eligendi consectetur nemo ullam iure consequuntur, cupiditate provident iste recusandae repellat voluptatum tenetur assumenda voluptate architecto. Unde tempore voluptatem rem voluptates repellendus. Atque inventore rem sapiente accusamus animi saepe iure, reiciendis eveniet aliquid alias velit nobis eius esse! Sint aliquam id laboriosam provident soluta ullam similique quae eum in nihil iusto rerum delectus corporis nisi eos voluptatum distinctio, earum autem incidunt? Nemo provident aperiam officia. Nemo non velit error, eius sapiente illum deserunt officiis ullam ipsa blanditiis impedit voluptate facilis, quam in illo! Beatae ipsa illo recusandae, dignissimos voluptatum odio nemo, excepturi perferendis cumque obcaecati ipsum fugiat? Libero totam inventore asperiores sed at, doloremque, nostrum dicta, eveniet explicabo quod a possimus necessitatibus iure optio minus blanditiis officiis? Vel recusandae necessitatibus aperiam optio, accusantium repudiandae! Voluptas quis sed illum repudiandae! Quaerat, facilis. Veritatis libero voluptatibus dolorum alias maiores illo aperiam! Harum odio dicta ea magnam nulla fugiat nemo unde. Sunt provident ex neque cum iste repellendus nostrum, amet commodi, tempore animi mollitia facilis soluta ducimus ab aliquid unde cumque veritatis quaerat id corporis. Possimus doloremque a dicta laboriosam nostrum, dignissimos perferendis sit repellat, blanditiis deleniti optio! Et molestias explicabo sunt nemo recusandae eligendi distinctio consequatur ad magnam totam, libero pariatur aspernatur debitis impedit aut ex. Nemo quia reprehenderit pariatur neque ex. Sapiente officia in reprehenderit dicta dolores temporibus, cum debitis est rem repudiandae numquam voluptatibus accusamus consectetur iusto repellat quaerat iste nesciunt optio vitae, tenetur alias consequatur earum. Voluptatem expedita quibusdam neque culpa, consequuntur, reiciendis ipsa quod rem in aliquid natus beatae odio vel mollitia voluptatum quidem! Doloribus sequi, repellat veritatis autem harum quas asperiores, ex dicta aperiam, laboriosam itaque quibusdam labore earum mollitia veniam officia eos quasi cumque optio eveniet enim eum voluptate possimus voluptatum! Accusantium a sed eius nisi odio assumenda ipsam provident veniam voluptate nostrum ex molestiae corrupti sit fugiat quibusdam debitis saepe error, itaque dolor optio temporibus, blanditiis consequatur. Ipsum nulla sapiente quam sint doloribus ipsa quisquam accusantium magnam veritatis reprehenderit aperiam, tempore explicabo beatae. Qui tempore nisi necessitatibus minus impedit laborum sed consequatur mollitia minima vero? Nobis in voluptas error dolores ut quisquam, reiciendis libero non voluptates minus labore perferendis aperiam, iure similique harum nemo eligendi enim, officiis unde omnis exercitationem quos aspernatur? Animi asperiores quod voluptates! Ut consectetur nostrum ex est perferendis nihil excepturi enim. Nesciunt, quia soluta aspernatur exercitationem ipsam eaque mollitia recusandae saepe quidem! Ut dolorem eius fugit amet deserunt eum nobis quos labore odit. Cupiditate pariatur et illum tenetur. Harum incidunt, recusandae veritatis nesciunt unde beatae consequuntur suscipit. Cum illum voluptates placeat sequi? Ea, exercitationem esse rem facere expedita omnis dolorum commodi vel quam blanditiis iste, totam debitis quae facilis similique! Quis beatae quam et esse at perspiciatis ratione assumenda soluta reprehenderit ducimus corporis adipisci eveniet vero maiores consectetur nobis nulla explicabo reiciendis quo suscipit voluptas, in accusamus sit eaque. Optio tenetur deserunt vel, explicabo tempore ipsam ea illum harum voluptates! Totam non autem nisi veritatis earum, corrupti ratione necessitatibus quia iusto aut suscipit, quaerat excepturi consequuntur commodi dolorum labore sit. Minus nam explicabo mollitia quos accusamus, fugit necessitatibus ipsa. Soluta, debitis ullam! Quae id error accusamus dignissimos, consectetur aliquid officiis quo quaerat enim architecto aperiam quas corporis dolorem beatae, tenetur repudiandae maxime alias unde, ducimus cum aspernatur temporibus ex! Reiciendis in adipisci cupiditate ea laudantium officia quaerat ut fugiat architecto quisquam doloribus deserunt mollitia amet sed dolorum, porro commodi tenetur nulla totam molestiae itaque facilis iure consequatur dolorem! Doloremque saepe adipisci ullam numquam vel ab, aut corrupti at laborum minus amet, sed ad ducimus assumenda itaque voluptates neque eaque maxime. Est accusamus fuga maiores sed esse ipsam voluptates consectetur incidunt. Sunt numquam hic officiis quo esse incidunt. Magnam, veniam?
</div>
</div>
</body>
</html>
标签的书写顺序
先写浮动即left，right，因为常规流块盒子是撑满的，浮动标签在布局时会避开常规流盒子。
如果为了搜索引擎优化，将主要信息写在前面，可以使用相对定位，如下：
<style>
.container{
padding: 30px;
border: 3px solid lightblue;
position: relative;
}
.left{
background: lightcoral;
width: 300px;
margin-right: 30px;
position: absolute;
left: 0;
top: 30px;
}
.right{
background: sandybrown;
width: 300px;
margin-left: 30px;
position: absolute;
top: 30px;
right: 0;
}
.main{
margin: 0 300px;
border: hotpink 2px solid;
}
</style>
</head>
<body>
<div class="container ">
<div class="main">
<!-- 这块似乎避开了浮动标签，其实没有，行盒会避开，文字会自动生成一个匿名行盒，所以这里看起来像,解决办法是设置overflow:hidden -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos tempore corporis non repellendus, labore facere illo delectus consectetur tenetur qui exercitationem debitis soluta magni repudiandae, et quis iure aliquam nisi voluptatibus quae, aliquid fugit. Architecto dolorum possimus sit eius odio, alias, expedita ipsa, quasi consequuntur aliquam earum molestias id aliquid voluptatem libero? Illum autem optio consectetur unde labore ipsum dignissimos cum eaque, doloribus cumque minus, quos amet soluta ipsam odio quia. Rem facere iste tenetur suscipit mollitia laborum enim harum officiis deserunt? Pariatur culpa recusandae vero velit earum tempora minus similique sunt animi iure architecto commodi aut ipsam exercitationem, accusantium error magni at dicta provident quae cum quaerat magnam necessitatibus soluta. Aut placeat dolor vero fugiat ad officiis voluptatem dolorum. Hic iste, quidem, placeat adipisci consectetur ratione quia labore quo cupiditate eos iusto debitis explicabo! Repudiandae, similique nesciunt natus ea possimus dolores ipsam nostrum assumenda, perspiciatis, autem reprehenderit minima laboriosam ratione eos! Natus necessitatibus laborum fuga! Eveniet iste tempore non omnis illum, suscipit nostrum. Distinctio eaque laudantium voluptate pariatur placeat fugiat eos quis suscipit, sequi ex temporibus error accusantium repellat perferendis cupiditate omnis molestiae numquam, reiciendis, aliquid deleniti nulla earum sunt quia. Quia voluptate adipisci facilis fugit animi nesciunt! Excepturi dignissimos praesentium cupiditate similique delectus magnam architecto impedit ducimus. Ab amet culpa repellat, quaerat dignissimos nobis quasi deserunt eligendi, accusantium natus non cumque dolores itaque beatae ad nam. Explicabo dolor quam voluptatem aliquid voluptates cupiditate exercitationem sapiente praesentium nobis ipsam? Necessitatibus repellat blanditiis omnis minima hic architecto eligendi eos error sed obcaecati laudantium quidem, in molestias nostrum eveniet? Nihil qui eligendi voluptate ducimus et excepturi ea, hic dignissimos ut dolores reiciendis illo delectus laudantium enim repellat! Magni dolore quibusdam tempora non laudantium officia quo, autem dolor sapiente quas maiores neque maxime accusamus, magnam asperiores esse? Voluptatibus molestias quae quam consectetur id labore vero quas praesentium dolorum. Perspiciatis quos rerum distinctio deserunt a alias ipsa fugit rem error. Aspernatur labore nobis ad id enim, animi odio reprehenderit facilis itaque nihil facere. In eum possimus suscipit dolorum magni placeat laboriosam voluptates voluptas, unde mollitia nisi earum, accusantium cupiditate deserunt corrupti temporibus? Voluptatum ex dolor accusamus officia voluptate, repellat et exercitationem eveniet nesciunt, nam velit recusandae eos voluptatem minus non sunt esse saepe odio necessitatibus possimus ab suscipit doloremque? Iusto fuga soluta ducimus error molestiae quia nemo modi? Vero dolorum veritatis similique harum, natus voluptatum praesentium maiores minima! Eius illo possimus accusantium ducimus sint? Reiciendis similique illo quis placeat veritatis. Nesciunt dolore totam perspiciatis ullam laboriosam labore soluta magnam sequi similique non reiciendis mollitia, nemo tempora quibusdam exercitationem et error voluptas quidem incidunt fugiat eligendi eos enim qui ut. Optio laborum officia repellendus, vero consequatur sapiente cupiditate id eaque et perspiciatis dolor impedit aliquid recusandae velit dignissimos esse architecto nemo quaerat nulla nihil facere? Autem voluptatem beatae voluptas optio ex, et voluptatum vitae laudantium repellat? Architecto nemo odio ad praesentium enim adipisci unde voluptatibus distinctio, esse quibusdam assumenda, at eligendi rerum! Dicta, dolore eligendi ipsum reprehenderit enim, voluptas blanditiis praesentium voluptatibus, quisquam quo vel perspiciatis voluptate voluptates ad culpa minima quia mollitia est doloribus consectetur iure aliquam laborum animi? Totam, id? Officia facere dignissimos quibusdam dolor unde, a autem. Et ab quam similique animi officiis illo, repudiandae harum magni esse id dolores quod! Explicabo, quis enim iste, animi molestiae perspiciatis similique, architecto exercitationem dolores itaque optio ducimus. Impedit labore ut reprehenderit officia? Ipsa provident, autem consequuntur ratione repellat molestias atque numquam expedita dolorem soluta excepturi aperiam labore molestiae consectetur blanditiis doloremque quidem hic! Repudiandae magni reprehenderit ullam tenetur labore dolor maxime ut sequi earum nobis! Temporibus quas delectus illum neque, vel, iusto vero atque, mollitia provident a aperiam ullam hic. Praesentium ea reiciendis consectetur corrupti ducimus ipsam dignissimos possimus eaque sed reprehenderit cumque ad, voluptatibus delectus? Officiis id exercitationem, fuga fugit alias necessitatibus aut at placeat perferendis qui nesciunt rerum accusantium laboriosam obcaecati quo velit cumque. Alias praesentium culpa laboriosam velit adipisci fuga? Corrupti laudantium, itaque nesciunt animi voluptatem, earum officiis eum illum autem id, omnis doloribus commodi debitis! Perferendis magni quos eaque ut natus dolores neque quasi iste nemo doloremque, dicta qui mollitia facilis asperiores quas est, atque corrupti, itaque amet a aliquam accusamus. Corrupti nam consequatur dignissimos. At eligendi, impedit odio voluptatum facere distinctio. Quia harum minus velit qui totam excepturi inventore modi odit rerum voluptates consequatur impedit, placeat architecto fuga iusto voluptatem quam id quasi quaerat, ratione eum! Inventore nisi delectus fugit hic maiores consequuntur! Cum dignissimos culpa eum at excepturi eos labore quasi officia laborum. Ratione fugit totam dolores, vel eaque natus facere voluptatum corporis repudiandae vero libero? Quas optio tempore itaque id obcaecati odio deleniti facilis tempora eius dolor excepturi incidunt distinctio quod unde beatae ipsum doloremque, consequatur, expedita inventore ipsa. Quidem aliquam atque, dicta cumque quibusdam nihil ut porro, temporibus quo ipsam commodi dolores at eaque corporis. Rerum, consequatur repudiandae. Saepe nihil aliquam cupiditate ut officia praesentium laboriosam maiores aut, tempora deserunt dolor, optio quia. Voluptatem repudiandae a, voluptates quis eum corporis eius sed aperiam, dignissimos voluptate deleniti ex, fugit facilis! Alias, eveniet officiis earum quod in sequi, neque quidem debitis natus aperiam, voluptatibus perferendis! Distinctio, culpa facere corrupti cumque, tempora praesentium dolorem maiores, aspernatur mollitia error ut? Consequuntur repellendus earum beatae qui quo nisi eum, iure placeat sint aliquam. Minus autem culpa labore nesciunt accusamus aperiam ad vel! Soluta alias dolores ipsa autem blanditiis consequuntur est, aut voluptatum impedit libero velit tempora expedita sit adipisci quia recusandae? Ipsum nostrum facere doloribus quisquam delectus quod molestias corrupti quam quo, ullam blanditiis reiciendis sunt fugit repellendus illum velit asperiores numquam expedita error vitae, tenetur obcaecati. Voluptates, necessitatibus voluptas. Quasi corporis esse quas obcaecati illo saepe perspiciatis, facilis deserunt suscipit, ratione molestias consectetur voluptate eveniet officia recusandae in distinctio fugiat amet at harum dolor optio quae rem. A nihil, nulla consequuntur aliquid laboriosam quisquam dolorum earum dolores possimus consequatur eum officia natus, voluptate laudantium repellendus, quas quos impedit dicta neque aliquam. Omnis placeat illum hic! Reprehenderit voluptate provident est! Est veritatis mollitia reprehenderit illum nobis perferendis voluptate et eaque?
</div>
<div class="left">
Lorem ipsum dolor sit amet co </div>
<div class="right">
Lorem ipsum dolor sit amet consectetur adipisici </div>
</div>
</body>
</html>
后台页面的布局
<style>
body{
margin: 0;
}
h1{
margin: 0;
}
.app{
position: fixed;
width: 100%;
height: 100%;
/* 100%相对于视口 */
}
.header{
height: 60px;
background: #000;
color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.container{
width: 100%;
height: 100%;
/* 100%盒子宽度过高,相对于包含块，会忽略掉绝对定位标签，因为还有header */
background: lightblue;
padding-top: 60px;
/* 宽度又高 */
box-sizing: border-box;
}
.container .aside{
float: left;
width: 300px;
background: seagreen;
color: #fff;
height: 100%;
overflow: auto;
}
.container .main{
overflow: hidden;
height: 100%;
background: #fff;
padding: 20px;
box-sizing: border-box;
overflow: auto;
/* 形成滚动条 */
}
</style>
<body>
<div class="app">
<div class="header">
<h1>猫眼电影</h1>
</div>
<div class="container">
<div class="aside">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid enim possimus architecto quos repudiandae facilis eum! Placeat deleniti neque impedit sapiente! Molestias culpa accusamus similique, tempora, at autem voluptates amet voluptatum itaque saepe dolorum nisi tenetur quo incidunt voluptatem quasi, quis alias dicta vel. Odit aut nemo sequi similique incidunt consequatur magnam, voluptates ad architecto quod omnis officia porro dolore qui consectetur? Dicta corrupti suscipit similique possimus itaque magnam aspernatur reiciendis error, quod explicabo incidunt at atque voluptatum debitis alias dignissimos doloremque nihil, ex consectetur, officia aliquid? Rem aliquam sequi iste. Consectetur quae recusandae debitis explicabo cum adipisci mollitia minus ratione! Pariatur molestias error eveniet similique veniam officiis amet esse earum architecto quisquam necessitatibus eum laboriosam, dicta dolorum odit quo distinctio deserunt voluptatem velit fugit. Magnam iusto animi esse praesentium error placeat eaque numquam eveniet accusantium doloremque incidunt, tempore veritatis sit libero. Quasi earum a veniam laudantium sapiente, at aperiam hic, asperiores non laborum praesentium nobis nesciunt odit perferendis et distinctio vel laboriosam alias voluptatem cupiditate! Veniam unde laboriosam, debitis iure aut quo expedita accusamus dolore, minima fuga odit ut quos dolorem quasi fugit repellat cumque incidunt impedit. Beatae natus ipsam sint eius! Impedit adipisci inventore dicta dolor! Adipisci, qui? A corporis qui eaque praesentium. Unde delectus, quis vel nemo consequatur quod architecto fugit dolorum porro temporibus exercitationem ratione quisquam repellendus, illo eius excepturi qui cupiditate possimus officia nam ab consectetur nobis. Vitae, ad cupiditate voluptatem rerum facere sapiente. Corrupti ipsum repudiandae voluptate adipisci? Animi quod doloribus porro officia? Possimus architecto accusamus in dolorum laboriosam quaerat a quisquam maiores quo sed delectus sit recusandae, hic tempore exercitationem, nemo veritatis ipsam, minima vel nobis? Fugit obcaecati eligendi itaque molestiae asperiores? Obcaecati neque mollitia itaque enim praesentium dolor reiciendis, nostrum officia facilis nobis nam sunt eligendi officiis consequuntur consectetur. Necessitatibus quasi repellat enim quidem inventore accusamus quam voluptatibus possimus consequuntur cumque odio dicta alias eveniet, minus cum harum optio corporis corrupti vitae. Veritatis fuga neque at perferendis consequatur aperiam officiis nam explicabo! Dolorum, facere labore. Maiores voluptates praesentium maxime repellendus quia, obcaecati quidem fugit error perferendis beatae natus commodi velit, sint recusandae. Libero fugit impedit consectetur, ipsam voluptatum enim deleniti perferendis. Reprehenderit voluptatibus quae voluptates illum dolorem quia quaerat, quibusdam enim eaque debitis aliquam quod. Officia quo doloribus soluta quis quam molestiae quas corrupti eaque, nesciunt ad perferendis veniam quod magni iusto quos? Odit accusantium delectus placeat. Dicta excepturi pariatur quasi expedita provident omnis maiores quisquam doloremque blanditiis sed nostrum aliquam officia nesciunt quod velit, unde nobis aut commodi esse laborum modi accusantium vero nemo? Quasi porro ut facilis. Ab aut dolore, natus esse et voluptatum soluta ad aperiam quo? Placeat voluptatem soluta fuga aspernatur dicta, exercitationem illo perferendis, culpa magni qui sit reiciendis atque reprehenderit consequuntur sunt natus at asperiores explicabo omnis blanditiis adipisci ullam temporibus distinctio! Nihil similique cum perferendis a sapiente nobis obcaecati aliquam praesentium eum nam eaque ab, impedit distinctio alias quisquam sunt quos debitis deserunt eos fuga. Dolores ullam rerum officiis quisquam vel, omnis culpa architecto deserunt rem et quos ratione repudiandae sit ad. Ut, tempora. Ipsum temporibus totam vitae cupiditate beatae repellat eveniet! Adipisci iste deleniti laborum dolorem est neque sapiente ad, eaque asperiores! Dolores et earum, minima dolorem nobis at quos velit alias sed aliquid pariatur veritatis tenetur qui deleniti possimus quasi, aut placeat laudantium eos magni. Consectetur in voluptatem perferendis veritatis dolorem soluta nam at quas. Corrupti, vitae officia dolor dolores voluptate repudiandae quae provident? Ratione expedita commodi quos molestias quam animi tempora atque ducimus, iste vero enim voluptates praesentium harum minima minus id eius rerum quisquam magni earum deserunt nobis officia, nisi quae! Porro, vitae reprehenderit ducimus dolorum minus cumque voluptatum quo labore voluptatibus nesciunt deserunt. Iste non ut perspiciatis, nihil molestiae, dolorum numquam officiis ipsa totam aspernatur suscipit nesciunt fugiat atque quisquam sequi aperiam repudiandae amet possimus aliquid, modi fugit? Facilis deleniti, in libero nisi minus sunt quasi vero esse. Velit at iure eius, illo fuga voluptatum officiis voluptatem dolorum voluptate beatae assumenda rerum incidunt porro sed quae asperiores optio aperiam sequi amet. Amet aliquid obcaecati nihil eveniet natus! Eaque magni quaerat molestias esse reprehenderit corporis blanditiis maiores libero, minus nam dignissimos officiis exercitationem officia aspernatur accusantium nostrum provident optio repellendus fugit. Explicabo sed assumenda commodi deserunt exercitationem molestiae numquam, ad iste! Optio dignissimos odit officia porro cumque similique repellendus, quibusdam sequi cum fugit earum saepe, deleniti rerum, recusandae iusto vitae nobis laudantium. Quisquam, excepturi. Sapiente esse, iusto quia eveniet autem ex velit nam nihil ducimus quos officia, eaque culpa accusamus tempora expedita eligendi quis. Corporis delectus expedita reprehenderit qui iure, sit voluptatibus, rerum totam inventore, minima optio voluptates eveniet recusandae. Dignissimos at voluptatum fuga inventore, omnis perferendis sed, enim quia minima ut illum quis recusandae error esse voluptates ad, tempore minus blanditiis ullam aut saepe. Quae reiciendis incidunt, eaque quo earum, eius vitae fuga perspiciatis, dolorum accusantium autem! Qui dolorem nihil deserunt eligendi et assumenda velit voluptates, enim blanditiis. Veniam assumenda recusandae expedita, ab exercitationem eveniet deleniti quaerat corporis! Dolores quidem maxime, deleniti porro, beatae soluta eos nulla tempora ullam doloremque doloribus quis sapiente, architecto tempore praesentium debitis saepe. Tempora dolor ipsa maxime eveniet ipsum quidem soluta sint quod voluptas voluptate laborum vitae eum sed, voluptatum in iste officiis deleniti ex molestias. Quidem officiis tempore possimus recusandae, assumenda tenetur, accusamus vel qui incidunt similique explicabo mollitia ratione, pariatur culpa laudantium maiores. Nobis dolores molestiae aspernatur obcaecati voluptate adipisci, saepe autem, tenetur doloremque natus voluptatum ducimus in nihil debitis sit explicabo quia hic assumenda magnam quo totam? Praesentium officia neque amet! Sapiente a autem accusantium quam error. Minus doloribus saepe sint aspernatur praesentium modi, nam necessitatibus exercitationem cumque quis blanditiis hic numquam, vero alias, laudantium voluptatum perferendis odio placeat odit cum? Veritatis, aliquid nobis. Accusantium harum cum cupiditate optio animi! Eveniet porro earum incidunt hic. Tenetur odit illum voluptatibus aspernatur eius neque nisi dicta error sit sapiente animi quis, officia delectus harum distinctio velit dolorem, inventore repellendus quod maiores praesentium qui explicabo. Fugiat nam minima architecto ratione dolorum ad enim laudantium dignissimos!</div>
<div class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem architecto eos incidunt dolorum blanditiis culpa, voluptatem accusantium doloremque corrupti facilis numquam voluptatum quaerat deleniti eius ullam. Eveniet, nobis molestias nihil corporis possimus atque provident perspiciatis recusandae sunt voluptates, molestiae incidunt unde iste accusamus. Perferendis commodi, eaque voluptatibus doloremque, accusamus quod animi ut eligendi repellendus ab, eveniet iusto? Qui dignissimos, beatae doloremque animi officia nihil eaque fuga rem perferendis dolore magni accusamus ipsum reiciendis, natus dolorem id reprehenderit excepturi eum, similique neque. Esse illo, debitis non magnam excepturi minus totam voluptatibus? Temporibus eius laudantium quasi dolorum harum! Quibusdam hic similique atque nisi ex omnis culpa id, delectus sit quo maxime a eos facere doloremque, eaque nobis voluptatem voluptas et accusantium expedita blanditiis tempora. Quisquam, quaerat id! Sapiente eum aspernatur maxime. Debitis nam maxime saepe incidunt eligendi delectus nobis, culpa obcaecati maiores nulla. Dolorem minus qui repudiandae vero consectetur, perspiciatis eveniet optio porro labore voluptatibus, adipisci fugiat hic molestiae corrupti deserunt similique sed eos? Labore soluta iusto natus odio non, dicta provident ratione deserunt eos eveniet id accusantium tenetur nostrum consectetur. Iure aperiam, beatae quasi, eos inventore ratione assumenda est, quam nesciunt exercitationem alias! Officiis, harum. Dolorum, voluptatibus nobis corporis molestias optio illo impedit recusandae unde, aliquam aspernatur quaerat est, et illum minus reprehenderit velit facere dignissimos dicta. Accusamus recusandae illum, nesciunt, aliquam laborum soluta quam nulla labore animi, aspernatur minus! Rerum, voluptates non. Explicabo neque molestias quos voluptas alias? Vel, perspiciatis! Possimus pariatur ducimus magnam reiciendis? Odio, eos ut? Quia vel, incidunt error consequatur aspernatur doloremque labore inventore harum exercitationem nesciunt. Quasi, accusamus. Sint quod eveniet animi quia ab explicabo magni omnis autem sed nulla optio ipsam amet tempore ullam sapiente soluta sit, cum excepturi doloribus illo. Necessitatibus illo aliquam aliquid, excepturi labore nobis at error? Deserunt voluptatibus, laudantium iste porro repudiandae officia, accusamus amet possimus quae nobis dicta ullam molestias quod corporis. Consectetur nihil obcaecati labore illum deserunt dicta non officia porro assumenda exercitationem! Dolore accusantium quaerat, doloremque voluptatem commodi ex rem incidunt rerum, placeat veniam eius iure tempore, perferendis quisquam? Porro optio ipsum magni omnis dolorum quae eaque, eum fugit suscipit nobis incidunt consequatur atque necessitatibus illo reprehenderit, deserunt ipsam natus voluptate aperiam corrupti? Obcaecati commodi exercitationem unde saepe? Hic dolores, rerum error distinctio culpa perspiciatis iusto sequi sint, illum officiis, necessitatibus tenetur eum. Modi quibusdam odio architecto, ratione ex perferendis dolorem eligendi temporibus magnam minima saepe nihil tenetur ipsam omnis in id excepturi distinctio asperiores, adipisci provident? Quasi, expedita consequatur harum cumque, quae excepturi itaque accusamus eveniet ipsum dolorem soluta dolore doloremque at architecto tempore nulla eius. Vero modi magni, explicabo, nesciunt illo perspiciatis facere consectetur porro recusandae quibusdam numquam! Ipsum, minus unde adipisci, aspernatur distinctio harum fugiat quidem, voluptates modi a sapiente soluta? Temporibus nesciunt reiciendis repellat aliquam eaque, aut, iusto suscipit molestias quo nam possimus necessitatibus nulla tenetur ex? In recusandae eveniet, assumenda dignissimos neque at molestias repellendus quibusdam voluptatibus aperiam cum sapiente exercitationem quod nisi aliquam ab et ea amet cumque sit saepe, ipsam voluptas. Quas ratione minima quae? Doloribus, sint reiciendis ipsa distinctio dolorum expedita placeat dignissimos aliquam atque quisquam iste illum, quo voluptatem tempore asperiores illo. Quos omnis praesentium dolor officia at nam tempora asperiores, cupiditate perspiciatis voluptas eum excepturi aperiam natus quisquam suscipit optio cumque blanditiis, deleniti aliquam magnam. Repellat, explicabo consequatur. Ut accusantium tempora maxime, possimus culpa quis, aliquid, quam voluptates quisquam totam laborum hic magnam mollitia nisi dicta molestias nesciunt doloribus delectus cumque necessitatibus! Error sit velit temporibus nemo culpa sed repellat tenetur perspiciatis incidunt iusto laborum aliquid cumque accusamus qui inventore minus assumenda, sequi magnam consequatur nisi doloribus. Cupiditate nam animi dolorum consequuntur labore? Minus facere cum repellat illum, laborum architecto. Eveniet odio explicabo, quibusdam velit nesciunt possimus vitae ipsam minima totam. Magnam quibusdam minus sit doloribus magni maiores, sed deserunt facere veritatis expedita molestiae. Ducimus ipsum amet repellat delectus est eveniet maiores architecto nihil porro odio! Necessitatibus maiores harum sint culpa voluptatem excepturi laboriosam, aliquid similique impedit non? Pariatur consequatur quidem totam quos enim temporibus saepe quo dicta sunt dolorum dolorem inventore tempore explicabo eum repellat alias, tempora, magnam nam praesentium eligendi, cumque eaque vitae? Rerum, quam provident sed explicabo vitae possimus, voluptatibus dignissimos ad corrupti corporis ab itaque iste incidunt. Consequatur eligendi itaque, voluptates dolor enim ipsam odio nemo tempora deserunt. Recusandae perferendis cupiditate similique soluta, quaerat eaque corporis itaque, aspernatur error nihil aut ducimus repellat officiis dolorum et. Debitis perferendis voluptas adipisci odit vel asperiores ipsa recusandae laboriosam excepturi quas saepe, est vero velit fuga, ad at obcaecati dignissimos doloribus cupiditate nesciunt alias necessitatibus autem. Facere autem placeat amet provident ea ipsa alias ut laudantium perspiciatis id quisquam pariatur sunt fugiat molestiae, consequuntur quaerat neque accusantium impedit sit aspernatur inventore nobis cumque minus illum. Autem, error eius. Suscipit vel est voluptate aliquam possimus fugit eligendi? Ratione debitis facere officiis modi possimus omnis obcaecati ut illo dicta, provident deserunt praesentium labore laudantium eligendi id eveniet sint, quas enim, distinctio nulla. Eos similique velit soluta laudantium rem illo dignissimos, error odit ad? Eius voluptatem esse corrupti doloribus amet itaque id natus a corporis reiciendis in nesciunt temporibus sint aliquid odio dolores fugit officia unde, assumenda molestiae? Non sequi numquam deleniti maxime saepe nisi voluptatibus a natus vitae odio necessitatibus recusandae excepturi ad, porro magni inventore aspernatur quo vero quae aliquid at nostrum nesciunt tempore! Laboriosam reprehenderit perspiciatis accusantium, vero deleniti explicabo itaque. Molestiae magni consectetur voluptatibus aliquid error molestias obcaecati esse! Saepe, omnis necessitatibus assumenda deleniti at quae, rerum nobis harum perferendis minima vitae blanditiis rem id impedit illum explicabo incidunt praesentium sapiente consequuntur a quisquam consequatur laudantium voluptates delectus. Ut laudantium suscipit natus at, recusandae fuga consequatur modi dolorum itaque ipsum dolores eius iusto perspiciatis, dolore cupiditate fugit enim nisi quisquam molestiae officia quo? Impedit aperiam ratione mollitia quam amet dolore, quia quo quos consectetur iure odio voluptas labore, molestias a, blanditiis debitis quaerat? Excepturi mollitia similique sint, labore laudantium aperiam tenetur ratione a. In inventore accusantium nam, minima laudantium error quod debitis quos, repellat, reprehenderit optio!</div>
</div>
</div>
</body>
</html>