两列布局---左侧固定，右侧自适应

方法一，高度100%，左侧float，右侧自动宽度（会自动占满剩余宽度）。

CSS及相关的HTML如下：

body {
    margin: 0;
    height: 100%
}
html {
    /*兼容firefox的div高度100%*/
    height: 100%
}
#left {
    width: 150px;
    height: 100%;
    float: left;
    /*解决IE6的3px-Bug*/
    /*IE6下当浮动元素与非浮动元素相邻时，3px的Bug就会出现，它会偏移3像素。*/
    _margin-right: -3px;
    background-color: yellow
}
#main {
    height: 100%;
    background-color: green;
    overflow: auto;
}

<div id="left">left</div>
<div id="main">
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
    <br/>
    main
</div>

方法二，绝对定位absolute，使用方法一的HTML结构，左侧绝对定位，拉出文档流，高度100%并设置一定宽度200px。右侧自动宽度（将占100%）并设置margin-left：200px。

body {
    margin: 0;
    height: 100%
}
html {
    height: 100%
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #CCCCCC
}
#main {
    margin-left: 200px;
    height: 100%;
    background-color: #0099FF;
    overflow:auto;
}

方法三，右侧宽度与高度均100%，左侧部分float，使左侧部分被包含到右侧部分，如下面的HTML结构。

若左侧部分设有高度，则若右侧部分内容超出此高度时，其内容将会出现到左侧部分下方，这种特性有某些情境是有用的。如下图所示：

body {
    margin: 0;
    height: 100%
}
html {
    height: 100%
}
#left {
    width: 200px;
    height: 100%;
    background-color: #CCCCCC;
    float: left
}
#main {
    width: 100%;
    height: 100%;
    background-color: #0099FF;
    overflow:auto;
}

<div id="main">
    <div id="left">
        left

posted @ 2014-11-10 15:25 x_window 阅读(105) 评论(0) 收藏举报

刷新页面返回顶部

x_window

两列布局---左侧固定，右侧自适应

公告