IT News > トピックス > CSS・JavaScript > CSSだけでフレームを作る

CSS Frames v2, full-height | 456 Berea Street

http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

実装例

http://www.456bereastreet.com/lab/css-frames-v2/

サンプル

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSSでフレーム</title>
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
html>body #wrap {
height:100%; /* 100 % height */
}
#wrap {
width:40em;
margin:0 auto;
}
#header {
width:40em;
height:5em;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #content-wrap {
height:100%; /* 100 % height */
}
html>body #content {
padding:5em 1em;
}
#footer {
width:40em;
height:5em;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10; /* Prevent certain problems with form controls */
}
h1,h2 {
margin:0.15em 0;
}
p {margin:1em 0;}
.info {
padding:0.5em;
border:2px solid #999;
background:#fff;
}
#header,
#footer {
background:#ddd;
text-align:center;
}
#content-wrap,
#content {background:#f8f8f3;}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="./ie6.css" type="text/css">
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<h1>CSSでフレーム</h1>
<h2>CSSだけでフレームを作る</h2>
</div>
<div id="content-wrap">
<div id="content">
<p class="info">This page demonstrates the technique described in the article <a href="http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/">CSS Frames v2, full-height</a>. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>This is the last line.</p>
</div>
</div>
<div id="footer">
<div id="labfooter">
<p><a href="http://www.456bereastreet.com/lab/">Copyright &#169; 2003-2006 Roger Johansson</a></p>
</div>
</div>
</div>
</body>
</html>

IE用CSS

html {overflow:hidden;}
body {
width:100%;
overflow:auto;
background-color:black;
}
#header {position:absolute;}
#wrap,
#content-wrap {height:100%;}
#content {padding:5em 1em;}
#footer {
position:absolute;
bottom:-2px; /* Compensate for gap at bottom of viewport */
}

抜粋URL
http://phpspot.org/blog/archives/2006/09/css_9.html