css布局之左侧固定右侧自适应布局

最新推荐文章于 2024-08-08 13:55:38 发布

安得权

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量774

点赞数

分类专栏： [ 05 ] JS&HTML&CSS

[ 05 ] JS&HTML&CSS 专栏收录该内容

94 篇文章 2 订阅

订阅专栏

1.固定高度

 
 <!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>左侧固定+右侧栏自适应宽度</title> 
<style type="text/css"> 
* 
{ 
    margin:0; 
    padding:0; 
} 
#mainBody 
{  
    margin:0 auto; 
    border:1px solid #ccc; 
    padding:5px; 
} 
#leftCol 
{ 
    width:120px; 
    height:400px; 
    border:1px solid #ccc; 
    background-color:#f0f0f0; 
    position:absolute; 
} 
#rightCol 
{ 
    border:1px solid #ccc; 
    background-color:#f0ffff; 
    height:400px; 
    margin-left:127px; 
} 
</style> 
</head> 
 
<body> 
    <div id="mainBody"> 
        <div id="leftCol"> 
        </div> 
        <div id="rightCol"> 
        </div> 
    </div> 
</body> 
</html>

截图：

这里只截了IE6的。

注：如果布局元素不是body子级，加个position:relative;即可。

除了使用定位以外，用浮动float:left也可以，原理都是脱离文档流，把控件留给其他元素。

但是有个问题，由于absolute使得外面容器的高度取决于那个自适应的元素，比如我把高度改为300px看一下。

2.我们来拿float:left;这个方案讨论一下

我们知道对于浮动元素，脱离文档流，父元素捕捉不到其高度height,所以如果float的那个元素比较高，势必超出容器的边界。

我们思考，如果富容器也是float，是不是就可以摆脱这种现状，但是如果无限制的float，势必需要顶层做个清理。

所以我们采用多套一层float容器的方式实现：

我们上代码：

 
 <!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>左侧固定+右侧栏自适应宽度</title> 
<style type="text/css"> 
* 
{ 
    margin:0; 
    padding:0; 
} 
body 
{ 
    padding:10px; 
} 
#mainBody 
{ 
    width0:950px; 
    margin:0 auto; 
    border:1px solid #ccc; 
    padding:5px; 
    position0::relative; 
    overflow:hidden; 
    height:1%; 
} 
#layoutContainer 
{ 
    float:left; 
    width:100%;  
} 
#leftCol 
{ 
    width:120px; 
    height:200px; 
    border:1px solid #ccc; 
    background-color:#f0f0f0; 
    float:left; 
} 
#rightCol 
{ 
    border:1px solid #ccc; 
    background-color:#f0ffff; 
    height:300px; 
    margin-left:127px; 
} 
</style> 
</head> 
 
<body> 
    <div id="mainBody"> 
        <div id="layoutContainer"> 
            <div id="leftCol"> 
            </div> 
            <div id="rightCol"> 
            </div> 
        </div> 
    </div> 
</body> 
</html>