容器高度问题HTML / CSS

Question

我希望容器（紫色边框）的尺寸与主要内容一起增长，这样我就可以在它周围放置一个边框，使它看起来像侧边栏（蓝色边框）是全高。

    <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中的内容是它的高度。

添加overflow：hidden到容器会导致这种情况

Answer 1

在#container上添加float:left;。

OR

将overflow:hidden;放在#container上以清除内部浮动。

示例小提琴：http://jsfiddle.net/3jNTv/

Chris Coyier在这里写了一篇很棒的帖子： http://css-tricks.com/all-about-floats/

Answer 2

尝试将高度设置为heigh: 100%;？

Answer 3

试试这个，看实时例子：

link

height: auto !important;

Answer 4

我添加了一个类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>