两列布局，读《css那些事儿》
两列布局：
1、两列定宽：
要点：float、width固定、 :after清除浮动。
前提：两列的盒模型宽度相加不能大于父元素的宽度，否则会出现错位现象。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{padding:0;margin:0;}
.container {
width: 100%;
background-color: black;
margin: 0 auto;
}
.mainbox {
width: 60%;
background-color: deepskyblue;
float: left;
}
.sidebox {
width: 40%;
background-color: palevioletred;
float: right;
}
.footer {
background-color: green;
}
/*使用伪类的方法清除浮动对footer造成的影响*/
.container:after{
content:"";
font-size:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
style>
head>
<body>
<div class="container">
<div class="mainbox">
<h1> mainboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>div>
<div class="sidebox"><h1>sidebarh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>div>
div>
<div class="footer"><h1>footerh1>div>
body>
html>
两列自适应
3、左侧定宽，右侧自适应
要点：浮动、定位、负边距效果 :after清除浮动：
问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决-->
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{padding:0;margin:0;}
.container{position:relative;}
.sidebox{width:200px;background:red;position:absolute;left:0;top:0;}
.mainbox{width:100%;float:right;margin-right:-200px;background:green;}
.footer{background:yellow;}
.container:after {
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}
style>
head>
<body>
<div class="container">
<div class="sidebox" id="sidebox">
<h1> sideboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>
div>
<div class="mainbox" id="mainbox">
<h1> mainoxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
div>
div>
<div class="footer">
<h1>footerh1>
div>
<script type="text/javascript">
var mh = document.getElementById('mainbox');
var sh = document.getElementById('sidebox');
if (mh.clientHeight < sh.clientHeight)
{
mh.style.height = sh.clientHeight + "px";
} else {
sh.style.height = mh.clientHeight + "px";
}
script>
body>
html>
左侧定宽，右侧自适应
4、左侧自适应，右侧定宽
要点：浮动、定位、负边距效果 :after清除浮动：
问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{padding:0;margin:0;}
.container{position:relative;}
.mainbox{width:100%;float:left;background:green;margin-right:200px;}
.sidebox{width:200px;background:red;margin-left:-200px;position:absolute;right:0;top:0;}
.footer{background:yellow;}
.container:after {
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}
style>
head>
<body>
<div class="container">
<div class="sidebox" id="sidebox">
<h1> sideboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>
div>
<div class="mainbox" id="mainbox">
<h1> mainoxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
div>
div>
<div class="footer">
<h1>footerh1>
div>
<script type="text/javascript">
var mh = document.getElementById('mainbox');
var sh = document.getElementById('sidebox');
if (mh.clientHeight < sh.clientHeight)
{
mh.style.height = sh.clientHeight + "px";
} else {
sh.style.height = mh.clientHeight + "px";
}
script>
body>
html>
左侧自适应，右侧定宽
5、两列优化-一列定宽，一列自适应
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、js实现等高
原理:是mainbox的浮动并将其宽度设置为100%，将其中的.content设置默认宽度值（auto），margin右所留的空白等于sidebox宽度，再利用负边距原理将侧边栏“引”到主要内容的两边。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{padding:0;margin:0;}
.mainbox{background:#ccc;width:100%;float:left;}
.mainbox .content{margin:0 210px 0 0;background:red}
.sidebox{width: 200px;float:left;background:green;margin-left:-200px;}
.footer{background:yellow}
.container:after {
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}
style>
head>
<body>
<div class="container" >
<div class="mainbox" id="mainbox">
<div class="content">
<h1> mainboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>
div>
div>
<div class="sidebox" id="sidebox">
<h1> sideboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
div>
div>
<div class="footer"><h1>footer底部h1>div>
<script type="text/javascript">
var mh = document.getElementById('mainbox');
var sh = document.getElementById('sidebox');
if (mh.clientHeight < sh.clientHeight)
{
mh.style.height = sh.clientHeight + "px";
} else {
sh.style.height = mh.clientHeight + "px";
}
script>
body>
html>
两列优化-一列定宽，一列自适应
6、两列等高：
方法1：负边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{padding:0;margin:0;}
.container{overflow:hidden;position:relative; }
.mainbox{width:100%;float:left;background:green;margin-right:200px;}
.sidebox{width:200px;background:red;margin-left:-200px;position:absolute;top:0;right:0; }
.footer{background:yellow;}
/*实现左右两侧等高，但要注意的是，左侧（非定位）内容高度不能大于右侧（已定位）的内容高度，否则将无法撑开容器的高度*/
.mainbox,.sidebox{margin-bottom:-9999px;padding-bottom:9999px;}
style>
head>
<body>
<div class="container">
<div class="sidebox" id="sidebox">
<h1> sideboxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
div>
<div class="mainbox" id="mainbox">
<h1> mainoxh1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>
div>
div>
<div class="footer">
<h1>footerh1>
div>
body>
html>
方法2：js实现：
要点：在页面底部增加js代码实现两列等高