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
LIST
LIST
LIST
...반복
</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
LIST
LIST
LIST
...반복
</div>
<div id="list_right">
CONTENT
</div>
</body>
</html>
[/CODE]
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
12년 전
jquery 를 사용하여 해당 문제가 조금 개선 되었습니다.
var a = $("#list_left").height()-94;
$("#list_left").css("height", a);
var a = $("#list_left").height()-94;
$("#list_left").css("height", a);
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
채택
채택
채택
채택
채택
답변대기
답변대기
채택
채택
답변대기
채택
답변대기
채택
채택
답변대기
답변대기
답변대기