为何不定高度背景无法包含absolute的分区？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>task6</title> <link rel="stylesheet" type="text/css" href="baidu_task6.css"> </head> <body> <div class="container"> <header> <div class="ife_url"> <p>我的男神女神</p> </div> <p class="time">2016.09</p> <hr class="url_line"> </header> <section class="iu"> <div class="left"> <img src="e:/image/iu2.jpg" width="641" height="301"> <div class="left_green"> </div> <div class="left_red"> </div> </div> <div class="right"> <div class="right_p1"> <hr class="iu_line1"> <p class="p_one">iu</br>beautiful</p> <h4>How should I greet thee, with silence and tears. </h4> <p class="p_two">Hello World</p> </div> <div class="right_p2"> <div class="p2_one"> <p>23</p> </div> <div class="p2_two"> <p class="one"> I love </p> <p class="two"> youyouyou... </p> </div> <hr class="iu_line2"> </div> </div> </section> <section class="wwh"> <div class="what"> <h2>WHAT</h2> <p>iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美</p> </div> <div class="when"> <h2>WHEN</h2> <p>iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美</p> </div> <div class="how"> <h2>HOW</h2> <p>iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美</p> </div> </section> <section class="part3"> <div class="part3_container"> <div class="part3_left"> <div class="left_head"> <p class="en"><span>MA</span> LONG</p> </br> <p class="ch">马龙</p> <hr class="part3_line"> </div> <div class="left_down"> <p class="passage1"><span>帅</span>呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了</p> <img src="e:/image/malong.jpg" width="226" height="300"> </br> <p class="passage2">帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆</p> </br> <p class="passage3">帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了帅呆了</p> </div> </div> <div class="part3_right"> <img src="e:/image/malong2.jpg" width="458" height="275"> <div class="part3_right_down"> <div class="down1"> <p>马龙帅马龙帅马龙帅马龙帅.....................很帅</p> <p>马龙帅马龙帅马龙帅马龙帅.....................很帅</p> <p>马龙帅马龙帅马龙帅马龙帅.....................很帅</p> </div> <div class="down2"></div> </div> </div> </div> </section> </div> </body> </html>
*{
padding: 0;
margin: 0;
}
body{
background-color: #A9BEFE;
color:#767777;
font-size: 12px;
font-family: "Microsoft Yahei";
margin: 0 auto;
}
div.container{
background-color: white;
width: 892px;
margin: 100px auto;
padding: 20px 44px;
}
header div.ife_url{
width: 110px;
height: 61px;
background-color: #B26060;
float: left;
}
header div.ife_url p{
color: white;
font-family: "Microsoft Yahei";
font-size: 15px;
font-weight: 600;
margin-top: 40px;
margin-left: 5px;
clear: both;
}
header p.time{
font-family: "Microsoft Yahei";
font-size: 15px;
font-weight: 400;
float: right;
margin-top: 40px;
}
header hr.url_line{
border: 2px #938e8c solid;
width: 892px;
margin-top: 40px;
clear: both;
}
section.iu{
margin-top: 30px;
}
section.iu div.left{
position: relative;
width: 641px;
height: 301px;
display: inline-block;
}
section.iu div.left_green{
position: absolute;
top: 0px;
left: 0px;
background-color: #BBECBD;
width: 191px;
height: 301px;
opacity: 0.5;
}
section.iu div.left_red{
position: absolute;
top: 0px;
right: 0px;
background-color: #E7BAE7;
width: 191px;
height: 301px;
opacity: 0.5;
}
section.iu div.right{
float: right;
width: 220px;
height: 301px;
}
section.iu hr.iu_line1{
border: 2px #cc8091 solid;
width: 203px;
}
section.iu p.p_one{
font-size: 24px;
font-family: "5";
color: #cc8091;
line-height: 30px;
text-decoration: underline;
}
section.iu p.p_two{
font-size: 55px;
color: #75b86b;
font-family: "5";
font-style: italic;
}
section.iu div.p2_one{
font-size: 50px;
color: #cc8091;
font-family: "5";
margin-left: 10px;
width: 55%;
display: inline-block;
}
section.iu div.p2_two{
display: inline-block;
width: 35%;
margin-top: 20px;
}
section.iu div.p2_two p.one{
font-size: 15px;
color: #cc8091;
font-family: "5";
}
section.iu div.p2_two p.two{
font-size: 12px;
color: #cc8091;
font-family: "5";
}
section.iu div.right_p2 hr.iu_line2{
border: 2px #cc8091 solid;
width: 203px;
margin-top: 0px;
}
section.wwh{
width: 641px;
margin-top: 30px;
overflow: hidden;
}
section.wwh .what{
width: 35%;
display: inline-block;
padding: 0 10px 0 10px;
float: left;
}
section.wwh div.what h2{
font-size: 16px;
font-family: "Microsoft Yahei";
color: #418c59;
font-weight: bold;
text-decoration: underline;
line-height: 30px;
}
section.wwh .when{
width: 28%;
display: inline-block;
padding: 0 10px 0 10px;
float: left;
}
section.wwh .when h2{
font-size: 16px;
font-family: "Microsoft Yahei";
color: #d2994f;
font-weight: bold;
text-decoration: underline;
line-height: 30px;
}
section.wwh .how{
width: 25%;
display: inline-block;
padding: 0 10px 0 10px;
float: left;
}
section.wwh .how h2{
font-size: 16px;
font-family: "Microsoft Yahei";
color: #cc7680;
font-weight: bold;
text-decoration: underline;
line-height: 30px;
}
section.wwh p{
font-size: 12px;
color: #231815;
font-family: "Microsoft Yahei";
line-height: 16px;
opacity: 0.7;
}
section.part3{
width: 892px;
margin-top: 50px;
}
section.part3 div.part3_container{
position: relative;
}
section.part3 div.part3_left{
width: 400px;
position: absolute;
top: 0;
left: 0;
}
section.par3 div.left_head{
}
section.part3 div.left_head p span{
font-size: 72px;
color: #f5e327;
font-family: "SimHei";
font-weight: bold;
font-style: italic;
}
section.part3 div.left_head p.en{
font-size: 42px;
color: #11456b;
font-family: "SimHei";
font-weight: bold;
line-height: 16px;
}
section.part3 div.left_head p.ch{
font-size: 33px;
color: #11456b;
font-family: "SimHei";
font-weight: bold;
line-height: 10px;
display: block;
}
section.part3 div.left_head hr{
border: 2px #11456b solid;
width: 415px;
margin-top: 10px;
}
section.part3 div.left_down{
margin-top: 30px;
}
section.part3 div.left_down p.passage1{
font-size: 12px;
color: #767777;
font-family: "SimSuncss";
}
section.part3 div.left_down p span{
font-size: 70px;
color: #f5e327;
float: left;
font-family: "Microsoft Yahei";
padding: 0;
}
section.part3 div.left_down img{
float: right;
}
section.part3 div.left_down p.passage2{
font-size: 12px;
color: #767777;
font-family: "SimSuncss";
text-indent: 2em;
}
section.part3 div.left_down p.passage3{
font-size: 12px;
color: #767777;
font-family: "SimSuncss";
text-indent: 2em;
}
section.part3 div.part3_right{
width: 458px;
position: absolute;
top: 0;
right: 0;
margin-top: 30px;
}
section.part3 div.part3_right_down {
margin-top: 20px;
width: 459px;
height: 318px;
background-color: #90D2D0;
position: relative;
}
section.part3 div.part3_right div.down2{
position: absolute;
bottom: 0;
left: 0;
width: 260px;
height: 160px;
background-color: #BDFECF;
}
container定高度是图1，不定高度是图2.
怎样container不定高度实现图1；
easy1090浏览 1405回答 1
1回答
-
小白师兄
第一种:html,body{height:100%;} .container{height:100%}第二种:.container{ position:absolute; top:0; left:0; bottom:0; right:0; } //top,left,right,bottom四个属性的值可以根据你自己的需求自己调整!祝你好运!
随时随地看视频慕课网APP
Html/CSS