div의 자동 적응 높이 (모든 브라우저 호환)

1870 단어 브라우저
평소에 DIV+CSS를 개발할 때 자주 만나게 된다. 하나의div의 높이를 고정시킨 다음에 안에 하나의div를 끼워 넣는다. 그러나 안의div의 내용이 증가할 때 바깥의div를 펼칠 수 있지만 동시에 안의div가 물건이 없으면 바깥의div가 일정한 높이를 유지할 수 있다.주요한 해결 방법은 바깥의div에서min-height라는 속성을 사용하여 그의 높이를 확보하는 것이다. 이 속성은 IE7 이상의 각 버전과 FF, 크롬 등 브라우저를 지원하지만 IE6는 지원하지 않기 때문에 하나를 더 추가한다:height .
다음은 제가 데모를 만들었습니다.
 
 
<!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=utf-8" />
<title>     </title>
<style type="text/css">
/*out          200px,      in     */
body {width:100%; height:100%;}
.out{
	width:500px;
	overflow:hidden;   min-height:200px;
	_height:200px; 	_overflow:auto;
	background-color:#09C;	
}


.in{
	width:300px;
	background-color:#FFF;	
}

.bottom{
	width:500px;;
	height:60px;
	background-color:#900;
}


</style>
</head>


<body>
</body>
<div class="out">
<div class="in">
  <br />
  <br />  <br />
  <br />
  <br />  <br />
  <br />
  <br />  <br />
  <br />
  <br />  <br />
  <br />
  <br />  <br />
  <br />
  <br />  <br />
  <br />
  <br />  <br />

</div>
</div>
<div class="bottom"></div>





</html>

좋은 웹페이지 즐겨찾기