布局
多栏布局
两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background: lightblue;
min-width: 800px;
margin:0 auto;
}
.aside{
float: left;
background: #008c8c;
color: white;
width: 300px;
margin-right: 30px;
height:10000px;
}
.main{
overflow: hidden;
background: gray;
}
.clearfix::after{
content: "";
display:block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt in deserunt laborum exercitationem natus quo fugit, accusamus architecto. Voluptatum praesentium porro in veniam neque vel architecto accusantium numquam nisi explicabo!
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus debitis, maxime assumenda praesentium odio quas atque aliquam placeat enim sit nisi rerum facilis? Dignissimos cumque ducimus perferendis nihil qui rerum.
</div>
</body>
</html>
三栏布局
与两栏布局类似，灵活使用BFC，左右边栏浮动，中间设置为BFC即可。
等高
- CSS3的弹性盒
- JS控制
- 伪等高
伪等高做法(只能解决侧边栏高度比主区域短的)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
/* background: lightblue; */
min-width: 800px;
margin:0 auto;
/* 溢出隐藏 */
overflow: hidden;
}
.aside{
float: left;
background: #008c8c;
color: white;
width: 300px;
margin-right: 100px;
/* 尽量设置一个很大的高度 */
height: 10000px;
/* 再设置一个比较大的负数下margin以防影响其他盒子 */
margin-bottom: -9999px;
}
.main{
overflow: hidden;
background: gray;
}
.clearfix::after{
content: "";
display:block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt in deserunt laborum exercitationem natus quo fugit, accusamus architecto. Voluptatum praesentium porro in veniam neque vel architecto accusantium numquam nisi explicabo!
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero neque distinctio consequuntur aliquid error temporibus exercitationem quas consequatur illo? Excepturi optio provident rerum voluptates dolore beatae! Enim, assumenda perferendis. Non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora enim officiis ipsa voluptatibus molestiae eaque at, nostrum rerum atque et error aspernatur facilis provident iusto expedita debitis facere sunt unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt placeat eos ut deserunt mollitia, aspernatur harum quam nisi dolore officiis? Ea itaque animi, expedita atque esse quos odio laboriosam ipsa?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate porro corporis facilis dolor aliquam distinctio hic! Illo corporis quae quis aut praesentium placeat, modi, cumque amet ut consequuntur voluptates impedit?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus debitis, maxime assumenda praesentium odio quas atque aliquam placeat enim sit nisi rerum facilis? Dignissimos cumque ducimus perferendis nihil qui rerum.
</div>
</body>
</html>
元素书写顺序
主区域靠前书写的话，会导致浮动元素窜位，所以通常会侧边栏靠前书写。
如需主区域靠前书写，设置主区域左右margin留出空间，左右两个边栏做成相对外层浮动的相对定位。
后台页面布局
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
margin: 0;
}
body{
margin: 0;
}
.clearfix::after{
content: "";
display:block;
clear: both;
}
.app{
position: fixed;
width: 100%;
height: 100%;
background: gray;
}
.header{
height: 60px;
background: black;
color: white;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.container{
height: 100%;
width: 100%;
background: lightblue;
padding-top: 60px;
box-sizing: border-box;
}
.container .left{
float: left;
width: 300px;
background: #999;
height: 100%;
color: #fff;
padding:30px;
box-sizing: border-box;
overflow: auto;
}
.container .main{
overflow: hidden;
height: 100%;
background: white;
padding:20px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>
<body>
<div class="app">
<header class="header">
<h1>菜单栏</h1>
</header>
<div class="container clearfix">
<aside class="left">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, voluptas? Unde, exercitationem? Quidem aperiam voluptatum a nobis exercitationem, deleniti modi, pariatur natus, nulla vel reiciendis possimus. Nisi nemo recusandae atque eos. Ea, ex labore harum inventore accusantium qui optio consequatur cupiditate deserunt repudiandae facilis eaque, exercitationem possimus? Libero voluptatum recusandae soluta repellendus voluptas cupiditate debitis nobis? Necessitatibus consequuntur cumque natus ullam assumenda, fuga fugit consequatur. Vero, natus maiores eius numquam sit quam praesentium a aliquam atque architecto? Libero dolor, corporis fugiat sed atque explicabo ab ullam cum hic quidem impedit ex amet facere, voluptas iure in aspernatur culpa, officia quisquam.
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, deleniti magni. Velit similique eos voluptates nisi excepturi voluptatum corrupti, provident enim in ut eveniet fugiat. Veritatis, quo quod, hic eveniet rerum eius harum, nihil deserunt pariatur illum dolores veniam possimus fugiat. Fugiat quos ratione provident, labore ad velit rem quia quae. Porro recusandae minus sapiente dicta alias in odio quod maxime. Pariatur tempora nihil consequuntur eligendi, aliquid porro aut ut iusto doloremque sunt sit facere nam commodi ex qui sequi ab nobis quod, magni voluptatum eaque! Nostrum ex eius fugit. Sapiente aut, provident sit nisi et possimus ipsa exercitationem, doloribus assumenda necessitatibus perspiciatis. Autem corrupti iste suscipit aperiam tempora! Quo quaerat numquam, impedit molestiae dignissimos a sapiente quibusdam! Alias molestias numquam dicta dolor culpa fugit, hic ducimus? Amet praesentium fugit molestias maiores reiciendis nulla illum soluta id optio saepe, quis repellendus recusandae aperiam eius pariatur laborum exercitationem voluptatem quia eveniet ullam, odio temporibus incidunt sequi officia. Quia accusantium tempora illum odio quam nemo expedita eligendi consectetur rem itaque quibusdam aut, voluptatum, perspiciatis cum est corrupti libero temporibus. Commodi quisquam non dolores nihil consequatur iste ut hic dolorem reiciendis, laborum facilis explicabo exercitationem nemo eius sed dolor cupiditate. Et repellendus modi pariatur ab, ullam nam ea dolore optio similique animi sapiente fugit quae iure assumenda sint expedita minus unde illum. Animi itaque voluptates iusto, illo qui architecto iste aperiam corporis quasi sint cum, magni praesentium, soluta doloribus voluptatem porro consectetur unde eaque repellendus dignissimos ipsam facere. Nobis iste est repellat hic repudiandae, eligendi quaerat amet! Quis aspernatur ea nam vero numquam dolorem aut officia? Hic asperiores nobis reprehenderit, ratione, perspiciatis odit dignissimos minima quos, numquam recusandae ab omnis? Eius neque facilis debitis modi sed quasi est autem. Quo maxime dolor architecto, provident corrupti maiores et optio? Optio cupiditate exercitationem suscipit accusamus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, deleniti magni. Velit similique eos voluptates nisi excepturi voluptatum corrupti, provident enim in ut eveniet fugiat. Veritatis, quo quod, hic eveniet rerum eius harum, nihil deserunt pariatur illum dolores veniam possimus fugiat. Fugiat quos ratione provident, labore ad velit rem quia quae. Porro recusandae minus sapiente dicta alias in odio quod maxime. Pariatur tempora nihil consequuntur eligendi, aliquid porro aut ut iusto doloremque sunt sit facere nam commodi ex qui sequi ab nobis quod, magni voluptatum eaque! Nostrum ex eius fugit. Sapiente aut, provident sit nisi et possimus ipsa exercitationem, doloribus assumenda necessitatibus perspiciatis. Autem corrupti iste suscipit aperiam tempora! Quo quaerat numquam, impedit molestiae dignissimos a sapiente quibusdam! Alias molestias numquam dicta dolor culpa fugit, hic ducimus? Amet praesentium fugit molestias maiores reiciendis nulla illum soluta id optio saepe, quis repellendus recusandae aperiam eius pariatur laborum exercitationem voluptatem quia eveniet ullam, odio temporibus incidunt sequi officia. Quia accusantium tempora illum odio quam nemo expedita eligendi consectetur rem itaque quibusdam aut, voluptatum, perspiciatis cum est corrupti libero temporibus. Commodi quisquam non dolores nihil consequatur iste ut hic dolorem reiciendis, laborum facilis explicabo exercitationem nemo eius sed dolor cupiditate. Et repellendus modi pariatur ab, ullam nam ea dolore optio similique animi sapiente fugit quae iure assumenda sint expedita minus unde illum. Animi itaque voluptates iusto, illo qui architecto iste aperiam corporis quasi sint cum, magni praesentium, soluta doloribus voluptatem porro consectetur unde eaque repellendus dignissimos ipsam facere. Nobis iste est repellat hic repudiandae, eligendi quaerat amet! Quis aspernatur ea nam vero numquam dolorem aut officia? Hic asperiores nobis reprehenderit, ratione, perspiciatis odit dignissimos minima quos, numquam recusandae ab omnis? Eius neque facilis debitis modi sed quasi est autem. Quo maxime dolor architecto, provident corrupti maiores et optio? Optio cupiditate exercitationem suscipit accusamus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, deleniti magni. Velit similique eos voluptates nisi excepturi voluptatum corrupti, provident enim in ut eveniet fugiat. Veritatis, quo quod, hic eveniet rerum eius harum, nihil deserunt pariatur illum dolores veniam possimus fugiat. Fugiat quos ratione provident, labore ad velit rem quia quae. Porro recusandae minus sapiente dicta alias in odio quod maxime. Pariatur tempora nihil consequuntur eligendi, aliquid porro aut ut iusto doloremque sunt sit facere nam commodi ex qui sequi ab nobis quod, magni voluptatum eaque! Nostrum ex eius fugit. Sapiente aut, provident sit nisi et possimus ipsa exercitationem, doloribus assumenda necessitatibus perspiciatis. Autem corrupti iste suscipit aperiam tempora! Quo quaerat numquam, impedit molestiae dignissimos a sapiente quibusdam! Alias molestias numquam dicta dolor culpa fugit, hic ducimus? Amet praesentium fugit molestias maiores reiciendis nulla illum soluta id optio saepe, quis repellendus recusandae aperiam eius pariatur laborum exercitationem voluptatem quia eveniet ullam, odio temporibus incidunt sequi officia. Quia accusantium tempora illum odio quam nemo expedita eligendi consectetur rem itaque quibusdam aut, voluptatum, perspiciatis cum est corrupti libero temporibus. Commodi quisquam non dolores nihil consequatur iste ut hic dolorem reiciendis, laborum facilis explicabo exercitationem nemo eius sed dolor cupiditate. Et repellendus modi pariatur ab, ullam nam ea dolore optio similique animi sapiente fugit quae iure assumenda sint expedita minus unde illum. Animi itaque voluptates iusto, illo qui architecto iste aperiam corporis quasi sint cum, magni praesentium, soluta doloribus voluptatem porro consectetur unde eaque repellendus dignissimos ipsam facere. Nobis iste est repellat hic repudiandae, eligendi quaerat amet! Quis aspernatur ea nam vero numquam dolorem aut officia? Hic asperiores nobis reprehenderit, ratione, perspiciatis odit dignissimos minima quos, numquam recusandae ab omnis? Eius neque facilis debitis modi sed quasi est autem. Quo maxime dolor architecto, provident corrupti maiores et optio? Optio cupiditate exercitationem suscipit accusamus?
</div>
</div>
</div>
</body>
</html>
4652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
