본문 바로가기

CSS

[CSS] 100% Height


흔이있는 경우는 아니겠지만... 특정 엘레먼트의 Height를 어떤 상황에서도 세로 길이가 웹 브라우저의 전체가 되어야 할 때가 있다.

하지만 보통 <div> 태그가 하나 있고 그 <div>태그에 'height:100%'를 주면 <div>박스 안의 컨텐츠의 높이가 <div>의 Height가 된다.


이를 해결하려면 다음과 같이 코딩을 해야 한다.


HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>100%<⁄title>
<link rel="stylesheet" type="text⁄css" href="style.css">
<⁄head>
<body>
<div id="content">
첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.<br>
시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.<br>
크기를 모를때는 사용할 수 없습니다.<br>
<br><br><br>
그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.<br>
<br><br><br><br>
하지만... 여기서 또 문제가 발생하는 부분이 있는데요?<br>
float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.<br>
<br><br><br><br>
미치겠네요.<br>
그래도 방법은 있습니다. <br>
첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.<br>
<br><br><br><br>
다음은 그 대망의 완성본 입니다.
첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.<br>
시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.<br>
크기를 모를때는 사용할 수 없습니다.<br>
<br><br><br>
그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.<br>
<br><br><br><br>
하지만... 여기서 또 문제가 발생하는 부분이 있는데요?<br>
float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.<br>
<br><br><br><br>
미치겠네요.<br>
그래도 방법은 있습니다. <br>
첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.<br>
<br><br><br><br>
다음은 그 대망의 완성본 입니다.첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.<br>
시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.<br>
크기를 모를때는 사용할 수 없습니다.<br>
<br><br><br>
그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.<br>
<br><br><br><br>
하지만... 여기서 또 문제가 발생하는 부분이 있는데요?<br>
float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.<br>
<br><br><br><br>
미치겠네요.<br>
그래도 방법은 있습니다. <br>
첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.<br>
<br><br><br><br>
다음은 그 대망의 완성본 입니다.
<⁄div>
<⁄body>
<⁄html>

CSS 코드
html {
	height:100%;
}
body {
	margin:0px;
	padding:0px;
	height:100%;
}
#content {
	background: gray;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 20px;
	margin: auto;
	width: 900px;
	min-height: 100%;
}



중요한건 html과 body의 height:100%와, content의 min-height:100% 이다.

content에 min-height 로 주는 이유는 div박스 안의 내용이 브라우저 현 화면의 100%... 즉 한 화면을 넘가 있을 경우 그냥 100%를 주게되면 화면을 넘어가 있는 부분에 대해선 속성 적용이 안된다.

'CSS' 카테고리의 다른 글

[CSS] css를 이용한 가로 중앙, 세로 중앙 정렬  (0) 2013.03.27