0

この質問は、何百万回も尋ねられていることを知っています。しかし、私はこれを理解することはできません。だから私は自分のコードを追加して、この古くからの質問に対する支援を探します.

私は単に2つの列（div's）を持っています。divそして、長い 2 つの列の長さに合わせたい背景が 1つあります。

私がエミュレートしようとしている完璧な例は、Twitter のホームページです。メインの 2 列の背後には半透明の白い背景があり、パディングがあります。

これが私のコードです：

<div id = "wrap">
     <div id="content">
          <div id="column1"></div>
          <div id="column2"></div>
     <div>
</div>

私のCSS：

html, body {
    height: 100%;
}

/*  This goes 100% width of screen */
#wrap {
    background: #fff;   
}

/* This is column that I want to extend all the way down ! */

#content {
    padding: 0 10px;
    background: #bbb;
    width: 820px;
    min-width: 820px;
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}

#column1 {
    padding: 10px;
    border: 1px solid #bbb;
    background: #fff;
    width: 550px;
    margin: 80px 25px 75px 0;
    float: left;
    min-width: 150px;
}

#column2 {
    padding: 5px;
    border: 1px solid #bbb;
    background: #fff;
    width: 205px;
    float: left;
    min-width: 200px;
    margin: 100px 0 25px;
}

基本的にどうなるかというと、内容は 0 のようheightです。

バックグラウンド コンテナをこれまでで最も長い列の高さまで拡張するにはどうすればよいですか?

4

1 に答える 1

1

float:left;コンテンツ クラスに適用する

content {
  padding: 0 10px;
  background: #bbb;
  width: 820px;
  min-width: 820px;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  float: left;
}

例 jsFiddle

于 2013-08-04T22:23:30.887 に答える