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

#responsive-admin-menu を左側に、#content-wrapper を右側に配置し、ブラウザー ウィンドウ全体を埋める 2 列の流動的なレイアウトを作成したいとします。

この場合、両方の div の幅をパーセントで定義し、一方を左に、もう一方を右にフロートさせることをお勧めします。

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

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

ここでコードを編集した場所を見てください。

Answer 2

私のコードペン

左/上/右/下を使用して、「匿名」の幅と高さを指定します。

あなたの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;
}