动态高度不适用于绝对位置
我正在努力让我的主页设计完成，但是我遇到了一些麻烦，因为内容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 & 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 • Open Studio Times • Private Parties • Corporate Team-Builds • 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之后添加内容时，我认为白色背景会像往常一样向下扩展...不是它只是停留在那里的情况。 （看截图）如果有人有想法解决这个问题，我将不胜感激！
2 个答案:
答案 0 :(得分：3)
问题可能与"left" div的"right"和bodyInfo div浮动 out 有关。您需要在style="clear: both;" div中包含另一个bodyInfo div作为最后一个块元素。
有关使用浮点数的更多布局，请参阅此内容：CSS Design Patterns - Float and Clear
Here's jsFiddle上你的情况的通用模型。如果您使用style="clear: both"删除div，bodyInfo div周围的边框将不再包围两个浮动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 • Open Studio Times • Private Parties • Corporate Team-Builds • 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 -->
答案 1 :(得分：0)
Absolutely positioned elements do not expand their parents as they grow。内容容器的位置应该是静态的或相对的。
Here's some info for you on document flow;这是一个需要理解的重要概念。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？