布局
两栏布局
- 一般侧边都是定宽的，给上浮动
- 给主区域开启 BFC,然后要设置边距的话就给浮动元素设置。
- 如果给主区域设置，那么就会无效，因为主区域会设置相对于包含块的编剧。
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>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 90%;
height: 800px;
margin: 0 auto;
background-color: pink;
min-width: 1200px;
}
aside {
width: 260px;
height: 100%;
margin-right: 20px;
background-color: #008c8c;
float: left;
}
.main {
height: 100%;
background-color: aqua;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<aside>我是侧边栏</aside>
<div class="main">主区域</div>
</div>
</body>
</html>三栏布局
- 左侧、右侧都是固定宽度，中间开启 BFC 即可。
- 书写顺序必须是：左 右 中。因为浮动元素会排在 BFC 元素后面，中左右顺序就不行了。
- 如果非要 SEO 优化，将中间区域前置，可以主区域将左右 margin 给预留，然后使用绝对定位将两个侧边定位过去即可。
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>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 90%;
height: 800px;
margin: 0 auto;
background-color: pink;
min-width: 1200px;
}
.left {
width: 260px;
height: 100%;
background-color: royalblue;
float: left;
}
.right {
width: 260px;
height: 100%;
background-color: saddlebrown;
float: right;
}
main {
height: 100%;
background-color: aqua;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<aside class="left">左侧</aside>
<aside class="right">右侧</aside>
<main>main</main>
</div>
</body>
</html>等高布局
- CSS3 的弹性盒
- JS 控制
- 伪等高
- 伪等高:
- 给侧边栏设置浮动，设置一个比较大的高度，设置一个 margin-bottom 为负值，让实际的高度为 10px。
- 设置 margin-bottom 为负值目的是为了让清除浮动的伪元素不排在页面最下方。
- 给父元素设置 overflow:hidden;解决侧边栏高度超出问题。
- 侧边栏的高度就跟随主区域一起变化了。
html
<!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>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.aside {
float: left;
background: #008c8c;
color: #fff;
width: 300px;
margin-right: 30px;
height: 10000px; /*高度设置多一点*/
margin-bottom: -9990px; /*margin-bottom设置负值，为正*/
}
.main {
overflow: hidden;
background: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
voluptatibus nesciunt id iusto sapiente at explicabo, dolore eligendi,
eum, sunt veritatis animi inventore placeat maiores doloremque quod
ducimus maxime laboriosam.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe aliquid
sapiente quo corporis ipsa nesciunt voluptatum architecto debitis amet
odio quos laborum, non dolorem suscipit dignissimos voluptatibus veniam
ad expedita quis culpa nostrum maiores assumenda earum. Commodi illo
odio soluta! Obcaecati consectetur, et rem ratione atque quos amet iure
debitis repellendus accusantium hic id impedit temporibus? Omnis
voluptatem possimus numquam repudiandae similique doloremque voluptates
inventore, labore porro dolor quos, incidunt est perferendis ipsam
culpa, nostrum officiis repellat dolore sit pariatur quam autem optio
impedit? Fugit, velit? Nobis recusandae ex possimus enim animi autem
dolores nam natus, blanditiis at velit sed rem impedit error laboriosam
voluptatem similique maxime doloremque adipisci illo minima obcaecati?
Ea earum ad dicta. Saepe, accusantium minima. Eligendi mollitia
architecto quis reprehenderit, dolorem maxime dignissimos iusto? Maiores
ratione reiciendis, facilis unde quis velit minima praesentium similique
adipisci eos, neque quia facere quibusdam natus error voluptatem dolorum
a. Voluptates recusandae perspiciatis quasi ab asperiores cum iure
dignissimos. Laborum temporibus ducimus vitae soluta a dignissimos qui?
Eius, minima consequuntur praesentium recusandae illo fugit quibusdam
provident laborum optio asperiores libero, eligendi repellat aliquam
esse ipsa nesciunt doloremque nemo qui maiores eaque rerum?
Necessitatibus voluptas nam consectetur voluptate illum, ipsa quaerat!
Perspiciatis laudantium labore aliquid quam consequuntur, nisi ex
eligendi, officia nesciunt doloribus numquam beatae quidem. Error
suscipit maxime nulla. Quas eos, maiores dolor excepturi sunt optio
perferendis quasi dolorum tenetur qui, incidunt accusamus voluptas
consectetur cum aut ea facilis praesentium eaque a quo asperiores fugiat
aperiam repellat. Eius hic aliquid nesciunt dolores non consequatur
laudantium ad mollitia harum! Dolore nulla atque id animi perspiciatis
expedita tempore sapiente inventore? Modi aperiam enim illo voluptatum
temporibus commodi iste quis ab quo, repellendus asperiores tempore
adipisci cupiditate similique nesciunt ducimus quos nostrum neque animi
nihil ipsum eos pariatur natus aspernatur! Praesentium consequuntur enim
quo.
</div>
</div>
</body>
</html>后台页面的布局
- 先套一个外层容器,fixed 定位，让其铺满整个屏幕
- header 固定定位
- main 区域放置侧边栏和右侧内容,然后设置 padding-top 将 header 的高度预留出来。
- 左侧浮动，右侧 BFC 即可。
html
<!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>
body {
margin: 0;
}
h1 {
margin: 0;
}
.app {
position: fixed; /*定位就相对于视口参照了，可直接设置宽高100%*/
width: 100%;
height: 100%;
}
.header {
height: 60px;
background: #000;
color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.container {
width: 100%;
height: 100%;
background: lightblue;
padding-top: 60px; /*将header高度预留出来*/
box-sizing: border-box;
}
.container .left {
float: left;
width: 300px;
background: rgb(119, 119, 119);
color: #fff;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
.container .main {
overflow: hidden;
height: 100%;
background: #fff;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>
<body>
<div class="app">
<header class="header">
<h1>header</h1>
</header>
<div class="container">
<aside class="left">我是侧边栏</aside>
<div class="main">我是主区域</div>
</div>
</div>
</body>
</html>