Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Başlıksız Belge</title>
<style>
#a01 {
	position:relative;
	left: 0px;
	top: 0px;
width:720px;
background-color:gray;
    height:100vh;
}
#a02 {
		position:relative;
	left: 0px;
	top: 0px;
width: 720px;
    height: auto !important;
	display:block;
background-color:orange;
}
#a03 {
	position:relative;
	left: 0px;
	top: 5px;
width: 710px;
height: 70px;
margin: 0px 5px 5px 5px;
background-color:brown;
}


#a04 {
			position:absolute;
	left: 5px;
	top: 80px;
width: 710px;
    height: auto !important;
background-color:blue;
}
#a04a {
max-width:100%;
}
#a05 {
	    position: absolute;
    left: 5;
    top: 100%;
    width: 710px;
    height: auto;
	background-color:green;
}
#a05a {
width: 710px;
height: 50px;
background-color:red;
}
#a05b {
width: 710px;
height: 50px;
background-color:yellow;
}


</style>
</head>

<body>
<div id="a01">

<div id="a02">

<div id="a03"></div>

<div id="a04"><img src="710x600.jpg" width="710" height="600" id="a04a"></div>


<div id="a05">
<div id="a05a"></div>
<div id="a05b"></div>
</div>  
  



</div>
</div>
</body>
</html>

http://i.hizliresim.com/9pMnPo.jpg

您好框架由顶部到底部的三个部分组成。底部覆盖部分3相对面积

在 1部分绝对一定高度100px 2段高度某些非自动在自动更换div后的第3节中，我想放置来自两个auto的绝对位置数据并不意味着什么 3您认为应该如何成为一部分？

Answer 1

一种不改变你的html的解决方案：

＆＃13;

#a01 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 720px;
  background-color: gray;
  margin: 0 auto;
  padding: 10px;
}
#a02 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 720px;
  display: block;
  background-color: orange;
  height: 80px;
}
#a03 {
  position: relative;
  left: 0px;
  top: 5px;
  width: 710px;
  height: 70px;
  margin: 0px 5px 5px 5px;
  background-color: brown;
}
#a04 {
  position: relative;
  margin: 10px auto;
  width: 710px;
  height: auto !important;
  background-color: blue;
}
#a04a {
  max-width: 100%;
}
#a05 {
  position: relative;
  width: 710px;
  height: auto;
  background-color: green;
  margin: 10px auto;
}
#a05a {
  width: 710px;
  height: 50px;
  background-color: red;
}
#a05b {
  width: 710px;
  height: 50px;
  background-color: yellow;
}

＆＃13;

<div id="a01">
  <div id="a02">
    <div id="a03"></div>
  </div>
  <div id="a04">
    <img src="710x600.jpg" width="710" height="600" id="a04a">
  </div>
  <div id="a05">
    <div id="a05a"></div>
    <div id="a05b"></div>
  </div>
</div>
</div>

＆＃13;

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Başlıksız Belge</title>
<style>
#a01 {
    position:relative;
    left: 0px;
    top: 0px;
width:720px;
background-color:gray;
    height:100vh;
    padding: 20px;
}
#a02 {
background-color:orange;
padding: 1px;
}
#a03 {
    position:relative;
    left: 0px;
    top: 5px;
width: 710px;
height: 70px;
margin: 0px 5px 5px 5px;
background-color:brown;
}

#a04 {
background-color:blue;
}
#a04a {
max-width:100%;
}
#a05 {
    background-color:green;
    padding: 8px;
}
#a05a {
width: 710px;
height: 50px;
background-color:red;
}
#a05b {
width: 710px;
height: 50px;
background-color:yellow;
}

</style>
</head>
<body>
<div id="a01" class= 'gray'>
<div id="a02" class= 'orange'>
<div id="a03" class= 'brown'></div> 
</div>
<div id="a04" class= 'blue'><img src="710x600.jpg" width="710" height="600" id="a04a"></div>
<div id="a05" class= 'green'>
<div id="a05a" class= 'red'></div>
<div id="a05b" class= 'yellow'></div>
</div> 
</div>
</body>
</html>

在此处查看http://jsfiddle.net/7wthbjnz/

div位置后的高度自动

2 个答案: