부모 div 높이와 자식 div 높이가 각 100%일때, 자식 div의 보더와 패딩값만큼 넘침 현상.
예님
그림과 같은 레이아웃을 작성중입니다.
top - left menu - content - bottom 으로 구성되어있구요.(bottom은 흰색으로 되어있어서 잘 보이지 않네요;)
브라우져의 창크기에 맞춰... left menu는 높이 값이 가변, content는 높이가 폭이 모두 가변으로 작성을 할려고 합니다.
다음과 소스로 정렬을 하는데까지는 성공을 했으나...
===============================================================================================================
body
div class=wrap
div class=toptop/div
div class=middle
div class=left_menu
div class=border_boxleft_menu/div
/div
div class=content_wrap
div class=content
div class=border_boxcontent/div
/div
/div
/div
div class=bottombottom/div
/div
/body
====================================================================================================================
html, body { width:100%; height:100%; }
body,
input,
textarea,
select,
button,
table { margin : 0; font-size:12pt; }
/* Page Layout */
.wrap { width:100%; height:100%; margin:0; }
.top { width:100%; height:80px; background:url(../images/top_back.jpg) repeat-x; }
.middle { width:100%; height:100%; background:black; *zoom:1; }
.middle:after { content:; display:block; clear:both; }
.left_menu,
.content { height:100%; background:#313131; padding:15px 3px;}
.left_menu { width:208px; float:left;}
.content_wrap { width:100%; height:100%; float:right; *zoom:1; margin-left:-224px; }
.content_wrap:after { content:; display:block; clear:both; }
.content { height:100%; margin-left:224px; }
.border_box { height:100%; background:url(../images/box_back.jpg) repeat-x top white;}
.content .border_box { }
.bottom { width:100%; height:80px; background:white; float:left; }============================================================================================================그림과 같이
html부터 body, 부모div 자식div 모두 높이 값이 100%로 되었다보니...
자식 div의 보더값과 패딩값만큼... 자식 div가 부모div의 바깥으로 밀려납니다.
이 현상을 해결할 수 있는 묘안이 있을까요? ㅠ
방법을 찾지 못하면 table로 페이지를 구성해야되는데... 뭔가 자존심이 상하네요 ㅠㅠㅠㅠㅠㅠㅠㅠ
-
곰탱이
지금 보니 제가 질문을 좀 성의 없이 올렸군요 ^ -^;;;
보드가 들어간 소스를 올렸어야는데.. 빼먹고... 기준점도 모호한;;;
어제 퇴근식나에 급하게 질문을 올려서 이 모양이네요;.
완전히 해결은 못했지만...
두분 답변이 도움이 되었습니다.
한번더 질문을 올리겠습니다~
감사합니다 ^ -^ -
모드니
height:100% 의 기준점이 어느 박스인가요? 게다가 위 소스엔 border 속성이 없는뎁쇼? width의 경우엔 width:100%를 선언하지 않고 padding, border 등을 선언하면 그냥 적용이 되요(block요소에 float나 position이 없을경우에) height의 경우 이런 레이아웃의 경우엔 크게 필요해 보이진 않는군요.. 좌우 박스의 높이를 맞추어야 한담녀 자바스크립트를 이용한 방법 또는 감싼 박스와 안쪽 박스 중 큰 놈에게
-
곰돌이
height:100%인 상태에서 상하로 패딩을 넣으면 100%가 초과하기 때문에 틀어짐이 발생합니다.
이 점은 참고하세요.