css - 动态高度不适用于绝对位置

Question

我正在尝试完成我的主页设计，但是我在让内容 div 的背景颜色流过 div 时遇到了一些麻烦。

<div id="container">
    <div id="content">
        <div id="headerInfo">
            <div class="leftLocation">
                <p>golden, co</p>
            </div>
            <div class="rightInfo">
                <span class="text">
                    <a href="about.php">about us</a>
                    <a href="contact.php">contact</a>
                    <span class="phone">XXX-XXX-XXXX</span>
                </span>
            </div>
            <div class="rightPic">
                <img src="images/facebook.png" alt="facebook" title="facebook" />
                <img src="images/yelp.png" alt="yelp" title="yelp" />
            </div>
            <div class="clear"></div>
        </div>
        <div id="homeHead">
            <img class="logo" src="images/logo.png" alt="logo" />
            <img class="paintSplash" src="images/paintSplash.png" alt="paint" />
            <span id="nav">
                <a href="classes">classes</a>
                <a href="classes">calendar</a>
                <a href="classes">gallery</a>
                <a href="classes">FAQ</a>
                <a href="classes">private events</a>
                <a href="classes">large-scale</a>
            </span>
            <span id="word">
                ...Paint
            </span>
                <img src="images/homeSlide1.png" class="pic1" alt="pic1"/>
                <img src="images/homeSlide4.png" class="pic1" alt="pic2"/>
                <img src="images/homeSlide7.png" class="pic1" alt="pic3"/>

                <img src="images/homeSlide2.png" class="pic2" alt="pic4"/>
                <img src="images/homeSlide5.png" class="pic2" alt="pic5"/>
                <img src="images/homeSlide8.png" class="pic2" alt="pic6"/>

                <img src="images/homeSlide3.png" class="pic3" alt="pic7"/>
                <img src="images/homeSlide6.png" class="pic3" alt="pic8"/>
                <img src="images/homeSlide9.png" class="pic3" alt="pic9"/>
            <div id="step1">
                <span class="easy">Easy as</span>
                <span class="part">Sign Up</span>
                <span class="num">1.</span>
                <p style="padding-bottom:5px;">Pick your favorite class and <a href="#">REGISTER ONLINE</a>.</p>
                <p class="bottom"><a href="#">Classes</a> Starting at only $25!</p>
            </div>
            <div id="step2">
                <span class="part">Show Up</span>
                <span class="num">2.</span>
                <p style="padding-bottom:5px;">We supply everything! Check out the <a href="#">FAQ</a>.</p>
                <p class="bottom">Limited Seating, <a href="#">Register Now!</a></p>
            </div>
            <div id="step3">
                <span class="part2">Enjoy!</span>
                <span class="num2">3.</span>
                <img class="wine" src="images/wine.png" alt="wine" />
                <p style="padding-bottom:10px;">Sip your drink, paint, play &amp; have fun.</p>
                <p class="bottom">See our <a href="#">Gallery</a> for results!</p>
            </div>
        </div><!--End Header Info -->
        <div id="bodyInfo">
            <div id="left">
                <p>
                    <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!
                </p>
                <p id="midLeft">
                    <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events
                </p>
                <p>
                    Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!
                </p>
            </div>
            <div id="right">
            </div>
        </div><!-- End bodyInfo -->
    </div>
</div>

CSS：

#container{
width:100%;
height:100%;
}
#content{
width:900px;
height:100%;
margin:0px auto;
background-color:#FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
/*Header Info*/
#headerInfo{
position: relative;
}
.leftLocation{
float:left;
font-family: HelveticaNeueStd;
font-size:14px;
color:#4d2c0d;
height:30px;
margin-top:10px;
}
.leftLocation p{
padding-right:5px;
}
.rightInfo{
position: relative;
float:right;
width:360px;
}
.rightInfo a{
color:#3397bf;
text-decoration: none;
font-size:14px;
font-family: HelveticaNeueStd;
padding-right:10px;
}
.rightInfo a:hover{
color:#e11b6b;
}
span.text{
position:absolute;
top:-7px;
}
span.phone{
font-family: Lavanderia;
font-size:30px;
color:#4d2c0d;
}
.rightPic{
position: absolute;
right:0px;
}
/*Home Head*/
#homeHead{
background-image:url('../images/homeHead.png');
width:900px;
height:573px;
position:relative;
clear: both;
}
.logo{
position: absolute;
top:-30px;
left:10px;
}
.paintSplash{
position: absolute;
left:350px;
top:-35px;
height:105px;
}
#nav{
position: absolute;
left:245px;
top:70px;
}
#nav a{
color:#FFF;
font-size: 16px;
font-family: HelveticaNeueStd;
padding-right:10px;
text-decoration: none;
}
#nav a:hover{
color:#e11b6b;
}
#word{
position: absolute;
top:90px;
left:235px;
padding:10px;
color:#3397bf;
font-family: Lavanderia;
font-size:35px;
}
#pic1{

}
.pic1{
position:absolute;
top:249px;
left:160px;
width:140px;
height:174px;
}
#pic2{
transform: rotate(7deg);
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari and Chrome */
-o-transform: rotate(7deg); /* Opera */
-moz-transform: rotate(7deg); /* Firefox */
}
.pic2{
position:absolute;
top:263px;
left:424px;
width:102px;
height:150px;
transform: rotate(7deg);
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari and Chrome */
-o-transform: rotate(7deg); /* Opera */
-moz-transform: rotate(7deg); /* Firefox */
}
#pic3{
transform: rotate(-13deg);
-ms-transform: rotate(-13deg); /* IE 9 */
-webkit-transform: rotate(-13deg); /* Safari and Chrome */
-o-transform: rotate(-13deg); /* Opera */
-moz-transform: rotate(-13deg); /* Firefox */
}
.pic3{
position:absolute;
top:252px;
left:641px;
width:121px;
height:173px;
transform: rotate(-13deg);
-ms-transform: rotate(-13deg); /* IE 9 */
-webkit-transform: rotate(-13deg); /* Safari and Chrome */
-o-transform: rotate(-13deg); /* Opera */
-moz-transform: rotate(-13deg); /* Firefox */
}
#step1{
position:absolute;
font-family: Helvetica;
top:500px;
left:100px;
width:200px;
height:60px;
padding:15px;
text-align: center;
background-color:#f0deba;
-webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#step1 a{
color:#e11b6b;
}
.bottom{
font-family: HelveticaNeueStd-Italic;
color:#3397bf;
}
.bottom a{
color:#e11b6b;
}
.easy{
font-family: Helvetica;
font-size:14px;
position: absolute;
color:#FFF;
top:-25px;
left:-30px;
}
.num{
font-family: HelveticaNeueStd;
font-size:45px;
color:#FFF;
position: absolute;
top:-45px;
left:20px;
}
.part{
font-family: Lavanderia;
color:#FFF;
font-size:40px;
position: absolute;
top:-45px;
left:60px;
}
.num2{
font-family: HelveticaNeueStd;
font-size:45px;
color:#FFF;
position: absolute;
top:-45px;
left:60px;
}
.part2{
font-family: Lavanderia;
color:#FFF;
font-size:40px;
position: absolute;
top:-45px;
left:100px;
}
#step2{
position:absolute;
font-family: Helvetica;
top:500px;
left:345px;
width:200px;
height:60px;
padding:15px;
text-align: center;
background-color:#f0deba;
-webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#step2 a{
color:#e11b6b;
}
#step3{
position:absolute;
font-family: Helvetica;
top:500px;
left:590px;
width:200px;
height:60px;
padding:10px;
padding-bottom:20px;
padding-left:50px;
text-align: center;
background-color:#f0deba;
-webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#step3 a{
color:#e11b6b;
}
.wine{
position:absolute;
top:-30px;
left:5px;
}
/*bodyInfo*/
#holder{
width:900px;
height:573px;
}
#bodyInfo{
width:100%;
}
#left{
width:450px;
float:left;
}
#right{
width:450px;
float:left;
}

一切都包含在容器和内容 div 中，所以我认为当我在 homeHead 之后添加内容时，白色背景会像往常一样向下扩展......不是它只是停留在那里的情况。（看截图）如果有人有解决这个问题的想法，我将不胜感激！

score 3 · Accepted Answer

问题可能与您的 div 中浮出的"left"和div 有关。您需要在 div 中包含另一个 div作为最后一个块元素。"right"bodyInfostyle="clear: both;"bodyInfo

有关使用浮动的更多布局，请参阅此内容：CSS 设计模式 - 浮动和清除

这是您在 jsFiddle 上的情况的通用模型。如果用删除 div，则divstyle="clear: both"周围的边框bodyInfo不再环绕两个浮动 div。

<div id="bodyInfo">
    <div id="left">
        <p>
            <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!
        </p>
        <p id="midLeft">
            <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events
        </p>
        <p>
           Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!
        </p>
    </div>
    <div id="right"></div>
    <div sytle="clear: both;"></div>
</div><!-- End bodyInfo -->

score 0 · Accepted Answer

Absolutely positioned elements do not expand their parents as they grow. The positioning of your content container should be static or relative.

Here's some info for you on document flow; this is an important concept to understand.

css - 动态高度不适用于绝对位置

2 回答 2

Related

Reference