常にウインドウにあわせた枠を表示する

Web

2020.08.23

常にウインドウにあわせた枠を表示します。

ウインドウの枠を超えた場合は、超えたサイズに合わせて、枠を拡張します。

動作確認済み

IE 6.0
Firefox 3.5.3
Google Chrome
safari 4.0.3
Opera 10.00

<?xml version="1.0" encoding="shift-jis"?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head> 
<title>ウインドウいっぱいのフレームを作る</title> 
<meta name="keywords" content="フレーム"> 
<meta name="description" content="フレームのテンプレートです"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
 
<style type="text/css"> 
* { 
    margin: 0px; 
    padding: 0px; 
} 
html, body { 
    height: 100%; 
    min-width: 900px; 
    text-align: center; 
    margin: 0px auto; 
    overflow: auto;        /* Opera 9.51対策*/ 
} 
body > #container { 
    height: auto; 
} 
div#container { 
    margin: 0px auto; 
    padding: 0px; 
    min-height: 100%; 
    height: auto !important;    /*IE6対策*/ 
    height: 100%; 
    border-left: 10px solid #E2DCC4; 
    border-right: 10px solid #E2DCC4; 
    position: relative; 
} 
div#frame_body { 
    width: auto; 
    height: 100%; 
    margin: 0px auto; 
    padding: 10px; 
    padding-bottom: 10px; 
} 
div#frame_top { 
    height: 10px; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    border-top: 10px solid #E2DCC4; 
} 
div#frame_bottom { 
    height: 10px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px !important;    /*IE6対策*/ 
    bottom: -1px; 
    left: 0px; 
    border-bottom: 10px solid #E2DCC4; 
} 
div#contents { 
    width: 800px; 
    margin: 0px auto; 
    text-align: left; 
} 
 
</style> 
</head> 
 
<body> 
<div id="container"> 
    <div id="frame_top"></div> 
    <div id="frame_body"> 
        <div id="contents"> 
            <p>ここにコンテンツを作成していきます。</p> 
        </div> 
    </div> 
    <div id="frame_bottom"></div> 
</div> 
</body> 
</html>