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;
    }

我将容器的高度设置为 250 像素，以便您可以看到它，我尝试将其设置为 100%，但只是没有显示任何内容，我猜这是因为其中没有内容，但我怎么能做到这一点，所以它的行为就像是mainContent 里面是它的高度。

在此处输入图像描述

将溢出：隐藏到容器中会导致此问题 在此处输入图像描述

4

4 回答 4

4

float:left;在#container 上放置一个。

或者

穿上overflow:hidden;#container 以清除内部浮动。

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

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

于 2013-07-23T11:42:24.853 回答
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 回答
0

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

于 2013-07-23T11:48:06.403 回答
0

试试这个，看看活生生的例子：

关联

height: auto !important;
于 2013-07-23T11:53:32.123 回答