html - 2 个垂直 div 和全宽页面

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

我的密码笔

使用 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;
}

Answer 2

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

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

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

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

看看我在哪里编辑了你的代码。