사전 조건
DOCTYPE을 사용할 것
IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래와 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">위와 같이 HTML Page에 첫 번째로 선언하면 기본적인 BoxModel Problem을 해결할 수 있다.
다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다.
첫 번째 조건
높이가 100%인 div 영역
height: 100%;
보통 div element에 위와 속성을 주면 안 된다
원인은 저 조건이 되기 위해서는 parent element의 height의 영향을 받기 때문이다.
그래서 해결책은 다음과 같다.
html, body {
height: 100%;
}위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.
두 번째 조건
header(헤더)와 footer(푸터) 영역 잡기
헤더는 상단에 붙어 있어야 하고 푸터는 하단에 붙어 있어야 한다. 가운데 영역만 크기에 따라 늘어나고 줄어든다.
container(컨테이너)가 min-height 100% 속성을 갖게 되면 나머지 헤더와 푸터 영역만큼 스크롤이 생기는데 이를 막기 위해 마이너스 margin을 사용한다. 헤더와 푸터 영역 만큼 마이너스 margin값을 주면 스크롤은 사라진다. 그리고 헤더는 아래 나온 element들 보다 위에 보여야 되기 때문에 position속성에 relative 값을 할당하고 z-index에 값을 할당한다.
#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}
#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}
#footer {
height: 50px;
background: #ddd;
}IE에서는 min-heigth 속성을 지원하지 않는다. 이를 해결하기 위해 height 속성에 100%를 주면 IE는 min-height와 같은 역할을 한다.
/* IE Hack */
html #container {
height: 100%;
}세 번째 조건
콘텐츠 영역이 헤더와 푸터에 가려진다. 보통 이런 경우 padding 속성을 활용한다. padding을 이용하면 콘텐츠가 보이는 영역을 재 설정을 할 수 있기 때문에 헤더와 푸터 영역만 큰 padding 값을 contents-box영역에 준다.
.contents-box {
padding: 100px 0 50px 0;
}네 번째 조건
가변 2단 구조를 하기 위해서 block element인 div에 float 속성을 줘서 해결한다.
.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}
.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}
/** float 속성은 다음에 나오는 모든 element에 계속 영향을 준다.
* 이를 끊어주는 element를 넣어서 float를 clear 한다.
*/
.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}Full Source Code
HTML Code
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/default.css" />
<title>높이 100% 가변 2단 페이지</title>
</head>
<body>
<div id="wrap">
<!-- Head Start-->
<div id="header">Header</div>
<!-- Head End-->
<!-- Body Start-->
<div id="container">
<div class="contents-box">
<div class="snb">Left</div>
<div class="contents">Right</div>
<div class="clear"></div>
</div>
</div>
<!-- Body End-->
<!-- Footer Start-->
<div id="footer">Footer</div>
<!-- Footer End-->
</div>
</body>
</html>CSS Code
/**
@author niceilm
*/
/* Type Selector */
* {
margin: 0;
padding: 0;
font-style: normal;
font-family: 굴림, Gulim, 돋움, Dotum, AppleGothic, Sans-serif;
}
img,
fieldset {
border: none;
}
hr,legend {
display：none;
}
li {
list-style: none;
}
a {}
a:visited {}
a:hover,
a:active,
a:focus {}
html:first-child select {
padding-right: 6px;
height: 20px;
}
/* Opera Fix */
option,x:-moz-any-link {
padding-right: 4px;
}
/* Firefox Fix */
option,x:-moz-any-link,x:default {
padding-right: 0;
}
/* Firefox Fix */
/* Layout Selector */
html,body {
height: 100%;
}
#wrap {
height: 100%;
width: auto;
}
#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}
#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}
/* IE Hack */
html #container {
height: 100%;
}
#footer {
height: 50px;
background: #ddd;
}
.contents-box {
padding: 100px 0 50px 0;
}
.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}
.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}
.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}참고사이트
http://sweetgirl-textcube.blogspot.com/
최신 버전으로 수정 및 응용
[html, css] height 100% 높이 레이아웃 간단한 정리
[html, css] height 100% 높이 레이아웃 간단한 정리
div 박스를 브라우저의 100% 높이로 지정해 주는 방법을 간단히 정리합니다. 1. sample.html sample 이름으로 height 100% 기본 페이지를 만들 html을 생성합니다. 난 !!! height 100% BOX가 되고싶어요 2. 결과페이
codezone.tistory.com
height값 100% 적용과 부트스트랩(Bootstrap)을 이용한 로그인 웹페이지 화면 구현
부트스트랩(Bootstrap)을 이용한 로그인 웹페이지 화면 구현
이전에 포스팅한 로그인 폼 페이지를 가지고 디자인을 변경해 보겠습니다. 디자인을 변경하기 전 부트스트랩이라는 웹 프레임워크를 사용하였습니다. 부트스트랩에 대하여 자세한 내용은 따로
codezone.tistory.com
부트스트랩(Bootstrap)을 이용한 로그인 웹페이지 화면 구현 2
부트스트랩(Bootstrap)을 이용한 로그인 웹페이지 화면 구현 2
부트스트랩을 이용한 로그인 페이지 화면을 만들어 보았습니다. 로그인 박스 형태이며, 로그인 박스의 좌우 정렬은 중앙에 위치하도록 하였고 브라우저 상당에서부터 150px 정도에 위치하도록
codezone.tistory.com
'프로그램' 카테고리의 다른 글
| [html, css] height 100% 높이 레이아웃 간단한 정리 (0) | 2022.10.25 |
|---|---|
| html 이란 무엇알까 배워야하는 프로그램일까? (0) | 2022.10.20 |
| [ jquery ] div의 id 값을 찾아 텍스트 변경는 방법 (0) | 2013.10.08 |
| [html, css] Div 중앙정렬 (0) | 2013.07.19 |
| ctrl+z, ctrl+d, ctrl+c 의 차이점 (0) | 2013.07.10 |
댓글