html - divを最大サイズにストレッチ

Question

私のcss：

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

私が欲しいもの：

私が得るもの：

赤=絶対ヘッダー
白=＃「青」のスクロールバー
を含むメイン緑=＃テキストを含むコンテンツの境界線。

私はそれを解決するのは非常に簡単だと思いますが、私は何年も試した後でもまだ管理できませんでした：P

更新/簡略化されたjsfiddle：http: //jsfiddle.net/YAgW2/9/

Answer 1

次のCSSを使用します。

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
  background-color: green;
}

#content {
  white-space: nowrap;
  padding: 5px;
  color: white;
  background-color: red;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

そして次のHTML：

<div>
<div id="main">

</div>
<div id="content" style="position:absolute">
    Try to extend this text
    </div>
</div>

Answer 2

フロートの追加：左; #contentにすると、表示の問題が解決します。

Answer 3

#content外に移動#mainして、好きな場所、つまり上に配置できませんでした#mainか？

Answer 4

CSSは次のようになります。

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: auto;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
  width:auto;
}