Question

刚刚厌倦了2 div垂直对齐的问题。我尝试在浏览器中出现水平滚动，如何摆脱滚动？我有这个HTML：

<div id="responsive-admin-menu"></div>
<div id="content-wrapper"></div>

css代码是

#responsive-admin-menu {
    width: 200px;
    left:0px;
    background-color: #404040;
    height: 100%;
    position: absolute;
    min-height: 500px;
}

#content-wrapper {
    position:absolute;
    overflow:auto;
    width:100%;
    margin-left: 200px;
    right:200px;
    background-color: #fff;
    padding: 15px;
}

Answer 1

我假设您要创建一个两列流体布局，左侧是#response-admin-menu，右侧是#content-wrapper，它们填满整个浏览器窗口。

在这种情况下，我建议以百分比的形式定义两个div的宽度，让它们向左浮动一个，向右浮动一个：

#responsive-admin-menu {
  width: 30%;
  float:left;
}

#content-wrapper {
  width: 70%;
  float:right;
}

看看我编辑代码的here。

Answer 2

My Codepen

使用left / top / right / bottom来提供“匿名”宽度和高度。

你的CSS

#responsive-admin-menu {

    position: absolute;
    width: 200px;
    left:0px;
    top:0px;
    bottom:0px;
    background-color: #404040;
    min-height:500px;

}

#content-wrapper {
    position:absolute;
    overflow:auto;
    top:0px;
    left:200px;   
    right:0px;
    background-color: green;
    padding: 15px;
}

2个垂直div和全宽页面

2 个答案: