css

CSS height 100% 잡는법

aneyh.c 2014. 5. 20. 17:35

출처 : http://blog.naver.com/demege1878?Redirect=Log&logNo=100208607827

HTML 마크업

 

<body>

<div class="wrap">
     <div class="head">head</div>
     <div class="container">
           <div class="side">side</div>
           <div class="cont">cont<br/>cont<br/>cont<br/>cont<br/>cont</div>
     </div>
     <div class="footer">footer</div>
</div>
</body>

 

CSS

​

html, body {width:100%; height:100%;}

 

- 화면내 DIV 박스들을 정확하게 %값으로 조정하려면 html과 body태그에 width:100%와 height:100%를 주어야 한다.


.wrap {width:100%; height:100%;}

 

- wrap으로 내용을 둘러쌈으로서 안에 있는 내용들은 wrap을 기준으로 %의 길이가 조정된다.


.head {position:relative; z-index:2; height:30px; background-color: red;}

 

- head에 z-index를 주는 이유는 아래 container박스가 100%이기때문에 head박스가 그 밑으로 가라 앉기 때문이다. (z-index를

  주기 위해서는 position값을 주어야 한다.

 

  tip. HTML 내 div 박스는 위에서부터 순서대로 쌓인다. 예를 들어  head, container, footer의 경우 head 부터 순서대로 div 박스가

  쌓인다고 생각하면 된다 z-index로 생각해보면 head->z-indx:1 /  container->z-indx:2 / footer->z-indx:3


.container {min-height:100%; margin:-30px 0 -50px 0; background-color:green;}

 

- container를 margin 값을 주는 이유?

  container의 높이가  100%이기 때문에 head:30px footer:50px의 높이값을 margin ( -30px  / - 50px ) 값으로 주지 않는다면

  100%+30px+50px의 높이가 되기때문에 100%를 넘어가게 된다. 따라서 head footer의 높이만큼 빼주어야 한다.

- height값이 아닌 min-height값을 주는 이유?

​  최솟값으로 해줘야 나중에 container안에 많은 div박스가 생겼을때 스크롤이 생기지 않도록 하기 위해서

   
.footer { height:50px; background-color:yellow;}


.side {position:absolute; top:30px; z-index:1; height:200px; width:200px; background-color:pink;}

 

- position:absolute값을 주는이유?

   side를 좌측에 배치하기 위해서.


.cont {position:relative; padding:30px 0 0 200px; background-color: gray;}

 

-  relative를 주는이유?

   side 값에 걸린 absolute값을 초기화 시켜 주기위해서 주는값.

[출처] CSS height 100% 잡는법 |작성자 푸른밤


저작자표시 비영리 변경금지