前端ABC实现左右布局：左边宽度固定的导航栏，右边自适应宽度，左边导航栏高度永远和右边内容高度保持一致,底部永远致于最下面，不会随内容的变化而改变，测试浏览器中，谷歌浏览器html下面会有留白，其他浏览器正常。注：本人觉得方法比较方便，容易上手
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html,charset=UTF-8">
<title>页面布局练习</title>
<style>
*{margin: 0;padding: 0}
html,body{height: 100%}
#left{
width: 270px;
border: 1px solid #000000;
float: left;
}
#right{
margin-left:300px;
height: auto;
}
.footer,.header{background-color: #ffc0cb;text-align: center;font-size: 16px;height: 50px;width: 100%;line-height: 50px}
.footer{position:absolute;bottom:0;left: 0}
ul{list-style: none}
ul li{margin-left: 40px;padding-top: 5px}
</style>
</head>
<body>
<div style="position:relative;width:100%;min-height: 100%">
<div class="header">标题栏</div>
<div style="padding-bottom: 115px;margin-top: 40px;">
<div id="left">
<ul>
<li>html</li>
<li>css</li>
<li>css3</li>
<li>javascript</li>
<li>Dom</li>
<li>Bom</li>
<li>jquery</li>
<li>ajax</li>
<li>node</li>
<li>angular</li>
</ul>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
</div>
<div style="clear: both;"></div>
</div>
<div class="footer">
footer部分
</div>
</div>
<script type="text/javascript">
window.onload=window.onresize=function(){
var leftDiv=document.getElementById("left");
var rightDiv=document.getElementById("right");
if(leftDiv.clientHeight < rightDiv.clientHeight){
leftDiv.style.height = rightDiv.clientHeight+'px';
}else{
rightDiv.style.height = leftDiv.clientHeight+'px';
}
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » css实现简单左右布局