css – 如何使用float,clear和overflow元素并排使用固定位置div /

所以我一直在努力使两个div并排在一起而不重叠。我有一个div将被修改为边栏和右div作为内容。希望有人可以帮助我。

HTML：

<div id="wrapper">
    <div id="leftcolumn">
    </div>
    <div id="rightcolumn">
    </div>
</div>

CSS：

body {
     background-color: #444;
     margin-top: 0;
     margin-bottom: 0;
}

#wrapper {
     width: 1005px;
     margin: 0 auto;
     padding: 0;
     overflow: auto;
}

#leftcolumn {
     width: 250px;
     background-color: #111;
     padding: 0;
     margin: 0;
     display: block;
     border: 1px solid white;
     position: fixed;
}

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     float: left;
     border: 1px solid white;
}

解决方法

这个答案可能需要根据你想要实现的位置来修改：fixed;如果你想要的是两列并列，那么只需执行以下操作：

http://jsfiddle.net/8weSA/1/

我只是把两列悬在左边。为了说明的目的，我为每列添加了最小高度。

HTML

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

CSS – 你会注意到我简化了CSS

body {
    background-color: #444;
    margin: 0;
}    
#wrapper {
     width: 1005px;
     margin: 0 auto;
}
#leftcolumn,#rightcolumn {
    border: 1px solid white;
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 250px;
     background-color: #111;
}
#rightcolumn {
     width: 750px;
     background-color: #777;
}

如果您希望左列保持原样，请滚动以下操作：

http://jsfiddle.net/8weSA/2/

在这里，我们将正确的列向右移动，同时添加position：relative;到#wrapper和位置：固定;到#leftcolumn。我再次使用最小高度进行说明，可以根据您的需要进行删除。

CSS

body {
    background-color: #444;
    margin: 0;
}
#wrapper {
    width: 1005px;
    margin: 0 auto;
    position: relative;
}
#leftcolumn,#rightcolumn {
    border: 1px solid white;
    min-height: 750px;
    color: white;
}
#leftcolumn {
    width: 250px;
    background-color: #111;
    min-height: 100px;
    position: fixed;
}
#rightcolumn {
    width: 750px;
    background-color: #777;
    float: right;
}

原文地址：https://www.jb51.cc/css/219922.html