Digital Bohemian | '브라우져 화면' 태그의 글 목록
Digital Bohemian 위치로그  |  태그  |  미디어로그  |  방명록
icon 브라우져 화면 에 해당하는 글2 개
2007.11.30   CSS핵(hack) 정리
2007.11.22   브라우져 화면의 100% 높이를 유지하는 레이아웃


icon CSS핵(hack) 정리
CSS | 2007.11.30 11:15
http://www.nmindplus.com/2006/06/28/css-hack/
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, CSS 핵, filter, hack, 브라우져 화면
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon 브라우져 화면의 100% 높이를 유지하는 레이아웃
CSS | 2007.11.22 15:14
브라우져 화면의 100% 높이를 유지하는 레이아웃

   1. 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다.
   2. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다.
   3. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니다. (주석같이 보이는 부분)
   4. #head 의 높이와 #foot 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다.

예시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#head {
    height: 100px;
    background: #ddd;
    position: relative;
    z-index: 1;
}
#body {
    min-height: 100%;
    margin: -100px 0 -50px;
}
* html #body {
    height: 100%;
}
#content-area {
    padding: 100px 0 50px;
}
#foot {
    height: 50px;
    background: #ddd;
}
</style>
</head>

<body>
<div id="head">
    요건 100px 높이 헤드
</div>
<div id="body">
    <div id="content-area">
        <p>컨텐츠 영역 1</p>
        <p>컨텐츠 영역 2</p>
        <p>컨텐츠 영역 3</p>
        <p>(계속 추가해서 테스트 가능)</p>
    </div>
</div>
<div id="foot">
    요건 50px 높이 풋
</div>
</body>
</html>
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : 100%, CSS, height, 레이아웃, 브라우져 화면
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



[PREV] [1] [NEXT]
BLOG main image
雜役夫
분류 전체보기 (89)
Mac OSX (2)
Linux (3)
Windows (1)
Database (3)
ASP (6)
PHP (1)
CSS (7)
Javascript (10)
Browser (4)
ASP.NET with C# (2)
Ruby on Rails (3)
FLEX (5)
2008년 (23)
2009년 (7)
2010년 (7)
2011년 (3)
여행 (2)
非常に自転車 超ブレーキ
非常に自転車 超ブレーキ
bp claims
bp claims
http://www.plaxo.com/profile..
http://www.plaxo.com/profile..
http://engageseo.newgrounds...
http://engageseo.newgrounds...
Firebug의 console 파헤치기[..
웹프로그래밍
Total : 95,381
Today : 21
Yesterday : 32
rss
위치로그 : 태그 : 방명록 : 관리자
webkorea's Blog is powered by Daum / Designed by plyfly.net

티스토리 툴바