0

重複の可能性:
フローティング div を最大化しますか?

私はこのHTMLコードを持っています:

    <div id="container">


        <div id="sidebar">

            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>

これはCSSコードです：

#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
}

#sidebar {
    float:left;
    width:25%;
    background:#555;
}

#content {
    float:left;
    width:75%;
    background:#eee;
}


.clear {
  clear: both;
}

残念ながら、サイドバーの高さはコインタナーと同じではありません。どうすれば高さを伸ばすことができますか?

ありがとう

4

3 に答える 3

1

あなたが探しているものと正確に一致しないかもしれませんが、これを試してください：

<style>
#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
    position: relative; //Makes the children in the container positionable
}

#sidebar {
  bottom: 0px; //position side bar.
  left: 0px; //position side bar.
  top: 0px; //position side bar.
  width:25%;
  background:#555;
  position: absolute
}

#content {
  margin-left: 25%;
  width:75%;
  background:#eee;
}


.clear {
  clear: both;
}
</style>
  <div id="container">


        <div id="sidebar">

            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>
于 2012-05-03T18:25:47.993 に答える
0

コンテナ要素の背景色をサイドバーと同じ背景色に設定できます。そうすれば、少なくともサイドバーが下まで伸びているように見えます。

サイドバーを下まで拡張する必要がある場合は、テーブルを使用するのが最も簡単な方法だと思います。CSS を使用してこれを行う方法があるかもしれませんが、私は多くの方法を検索しましたが、方法が見つかりませんでした。

于 2012-05-03T17:57:09.427 に答える
-2

<br/>#content には、サイドバーよりも多くの情報があります。したがって、#container 全体は、#content である内部の最大 div 要素の高さになります。これが、#sidebar が小さく見える理由です。#sidebarに同じ量を入れるか、両方の div から<br/>romve<br/>して両方の高さを設定します。

#sidebar{

height:100;

}

#content{

height:100;

}
于 2012-05-03T17:57:35.697 に答える