CSS 상단 height 값으로 아래쪽 div 100% 짤림 문제
이거해볼려고 여러번 질문글을 올리는데 그누보드 관련 질문이 아니라 죄송합니다.
위 이미지와 같은 상황입니다.
빨간색 라인은 고정, 파란색 라인은 크기가 조절되는 부분입니다.
다만, LIST, CONTENT 부분은 스크롤바가 있어 세로는 고정이라고 볼 수 있습니다.
그런데, 이미지에서 처럼 상단 HEADER 를 height 값을 지정하고 아래쪽에 height 값을 넣으면 화면이 보시는것처럼 짤려 버립니다.
아래쪽 menu, list, content 의 height 를 상단 header 의 height px 만큼 제외하고 menu, list, content 에 height 값을 주고자하는데 브라우저의 크기에 맞춰서 어떻게 처리를해야할지 모르겠습니다.
즉, 상단에 94px 를 줬는데..
아래쪽 div 에서 94px 만큼 100% height 값이 브라우저 밑으로 밀려 내려가 스크롤바가 짤리고 있습니다.
아래는 저 화면을 만들기 위해 작성한 코드입니다.
해결 방법 좀 알려주세요.
[CODE]
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
body {margin:0px; overflow:hidden; height:100%;}
#head_top {width:100%; height:94px; background-color:#78baff;}
#menu_left {width:200px; height:100%; position:fixed; left:0; top:94px; background-color:#ffb5ed;}
#list_left {width:250px; height:100%; position:fixed; left:200px; top:94px; overflow-y:auto; background-color:#f4ffb5;}
#list_right {width:100%; height:100%; position:fixed; left:450px; top:94px; background-color:#beffb5;}
</style>
</head>
<body>
<div id="head_top">
HEADER
</div>
<div id="menu_left">
MENU
</div>
<div id="list_left">
LIST<br>
LIST<br>
LIST<br>
LIST<br>
...반복
</div>
<div id="list_right">
CONTENT
</div>
</body>
</html>
[/CODE]
위 이미지와 같은 상황입니다.
빨간색 라인은 고정, 파란색 라인은 크기가 조절되는 부분입니다.
다만, LIST, CONTENT 부분은 스크롤바가 있어 세로는 고정이라고 볼 수 있습니다.
그런데, 이미지에서 처럼 상단 HEADER 를 height 값을 지정하고 아래쪽에 height 값을 넣으면 화면이 보시는것처럼 짤려 버립니다.
아래쪽 menu, list, content 의 height 를 상단 header 의 height px 만큼 제외하고 menu, list, content 에 height 값을 주고자하는데 브라우저의 크기에 맞춰서 어떻게 처리를해야할지 모르겠습니다.
즉, 상단에 94px 를 줬는데..
아래쪽 div 에서 94px 만큼 100% height 값이 브라우저 밑으로 밀려 내려가 스크롤바가 짤리고 있습니다.
아래는 저 화면을 만들기 위해 작성한 코드입니다.
해결 방법 좀 알려주세요.
[CODE]
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
body {margin:0px; overflow:hidden; height:100%;}
#head_top {width:100%; height:94px; background-color:#78baff;}
#menu_left {width:200px; height:100%; position:fixed; left:0; top:94px; background-color:#ffb5ed;}
#list_left {width:250px; height:100%; position:fixed; left:200px; top:94px; overflow-y:auto; background-color:#f4ffb5;}
#list_right {width:100%; height:100%; position:fixed; left:450px; top:94px; background-color:#beffb5;}
</style>
</head>
<body>
<div id="head_top">
HEADER
</div>
<div id="menu_left">
MENU
</div>
<div id="list_left">
LIST<br>
LIST<br>
LIST<br>
LIST<br>
...반복
</div>
<div id="list_right">
CONTENT
</div>
</body>
</html>
[/CODE]
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 1개
var a = $("#list_left").height()-94;
$("#list_left").css("height", a);