2个垂直div和全宽页面

时间:2013-11-08 08:48:15

标签: html

刚刚厌倦了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;
}

2 个答案:

答案 0 :(得分:0)

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

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

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

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

看看我编辑代码的here

答案 1 :(得分:0)

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