1

コンテナー (紫色の境界線) をメイン コンテンツに沿ってサイズを大きくして、その周りに境界線を配置して、サイドバー (青い境界線) が高さいっぱいに見えるようにしたいと考えています。

    <div id="container">
    <section id="mainContent">
        <h1>title here</h1>
            <img src="images/jayzmchg.jpg"></img>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
            Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
            a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
            cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
            ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
            venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
            ligula scelerisque hendrerit.</p>
    </section>

    <div id="sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<footer id="footer">
        <p></p>
</footer>

上がhtml、下がcss

#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
    }

#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
    }

#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
    }

コンテナの高さを 250px に設定して確認できるようにしました。100% に設定してみましたが、何も表示されませんでした。 mainContent の内部はその高さです。

ここに画像の説明を入力

コンテナーにオーバーフロー:非表示を追加すると、これが発生します ここに画像の説明を入力

4

4 に答える 4

0

高さをheigh: 100%;?に設定してみてください。

于 2013-07-23T11:48:06.403 に答える
0

クラス floClear を追加し、div を追加しました。それはうまくいきます。

CSS

#container { /* purple border */

   margin: 0 auto;
   max-width: 1000px;
   border: 1px solid #FF00FF;
}

#mainContent { /*red border */ 
   float: left;
   width: 700px;
   border: 1px solid #FF0000
}

#sidebar {/*blue border */
   width: 294px;
   float: right;
   border: 1px solid #0000FF;
}

.floClear
{
   clear:both;
}

HTML

<div id="container">
    <section id="mainContent">
        <h1>title here</h1>
            <img src="images/jayzmchg.jpg"></img>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
            Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
            a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
            cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
            ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
            venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
            ligula scelerisque hendrerit.</p>
    </section>

    <div id="sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="floClear"></div>
</div>

<footer id="footer">
        <p>Test</p>
</footer>
于 2013-07-23T11:57:48.900 に答える