레이아웃 height100%문제
집1어치워
고수님들 도와주세요!!
제가 만들려고 하는 레이아웃이 아래와 같습니다.
content부분에 height 100%주면 스크롤이 생기면서 브라우저를 벗어 납니다. (아래사진 참조)아래는 소스입니다.
html 소스
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
link rel=stylesheet type=text/css href=css/eroobill_kr.css/
titleUntitled Document/title
/head
body
div id=width
div id=wrap
!-- header --
div id=header
header
/div
!-- /header --
!-- container --
div id=container
!-- sub menu --
div class=snb
div class=snb_menu
div class=snb_menu_tit
h2레프트 메뉴1/h2
a href=img src=img/bt_menu_move.gif alt=이동 //aa href=img src=img/bt_menu_open.gif alt=열기 //a
/div
ul
lia href=레프트 메뉴1_1/a/li
li class=snb_menu_ona href=레프트 메뉴1_2/a/li
lia href=레프트 메뉴1_2/a/li
/ul
/div
/div
!-- sub menu --
div id=content
!-- 본문 --
div class=view_space space_small
h2title1/h2
p/p
h3title2/h3
h4title3/h4
/div
!-- /본문 --
!-- 기능 --
div class=aside
h3날짜설정/h3
h3계산기/h3
h3내가 본 메뉴/h3
/div
!-- /기능 --
/div
/div
!-- /container --
!-- footer --
div id=footer
pAll Rights Reserved./p
/div
!-- /footer --
/div
/div
/body
/html
css소스
/* common */
* {margin:0;padding:0;font-family:돋움, Dotum, AppleGothic, Sans-serif;line-height:14px}
body, html {background:#1d1d1d ;width:100%; height:100%; color:#FFF; font-size:12px; }
h1{ float:left}
img{ border: none}
li{ list-style:none}
/* layout */
#width {min-width:990px;margin:0 auto; height:100%}
#wrap { width:100%; height:100%; overflow:auto}
#header{width:100%;height:100px;min-width:980px; background:url(../img/bg_header.gif) repeat-x;position: relative;}
#container{width:100%; height: 100%; border:1px solid yellow}
#content {margin-left:250px; color:#555; height:100%; margin-right:10px;padding-top:10px;}
#footer {clear:both;width:100%;height:30px; position:relative; border:1px solid red}
.snb{float:left;width:230px;margin-right:-230px; margin:10px; display:inline;}
.view_space {float:left;width:100%;height:100%; background:#FFF;overflow-x:auto;overflow-y:hidden}
.space_small {margin-right:-319px}
.space_small .view_inner {margin-right:319px}
.aside {float:left;width:220px;height:100%; background:#d2d2d2}
-
희선
그렇게 하면 footer가 항상 아래 위치해 있어서 안되여..
-
미즈
1. #container 의 height:100%를 삭제.
2. #footer 의 clear:both를 새로운 div 생성후에 적용.
3. #footer position:absolute;bottom:0; 을 적용하시면 될듯하네요. -
오빤테앵겨
아.. 저도 이거 때문에 고민인데,,
3.처럼 하면 content 내용이 길어지면 footer가 content 위로 떠버리네영...ㅠㅠ
footer가 항상 화면 하단에 있으려면 어떻게 하면 될까용