Top

[HTML/CSS] DIV 높이에 맞춰 100%로 나오게 하는 방법 | Web-Programing
김경훈 (admin) | Editor | 2014/06/24 11:26:57 | 조회:5070

DIV 높이에 맞춰 100%로 나오게 하는 방법


홈페이제 기본 레이아웃을 DIV로 구성했을때.

본문 높이에따라 서브 DIV높이가 자동으로 마춰지는 레이아웃의 한 방법이다. 

레이아웃을 만드는데는 여러가지 방법이 있으며

개인 스스로 이방법 저방법을 통해여 자기한테 맞는 최적의 레이아웃을 만들어 내는게 중요하다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
     <title>div Layout</title> 
     <style type="text/css"> 
          html, body {margin:0;padding:0;} 

          #wrap { position:relative; width:1000px; } 

          #leftside{ position:absolute; top:0px; left:0px; bottom:0px; width:200px; background:#89CB7B; } 

          #content{ position:relative; left:200px; width:600px; min-height:500px; background:#F48D4E; } 

          #rigthside{ position:absolute; top:0px; right:0px; bottom:0px; width:300px; background:#ff00CC; } 

          #footer { position:relative; width:1000px; height:77px; background:#7DAAE3; } 

     </style> 
</head> 
<body> 
     <div id="wrap"> 
          <div id="leftside">leftside</div> 

          <div id="content">content</div> 

          <div id="rigthside">rightside</div> 

          <div id="footer">footer</div> 

     </div> 
</body> 
</html>  


공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [CSS] 브라우저 버전별 CSS핵 김경훈 (admin) 2014-06-24 11:38:46
▼ 다음글 [CSS] float을 clear하는 4가지 방법. 김경훈 (admin) 2014-06-20 11:47:29