4
私は現在、私のためにウェブサイトのテンプレートを設計しようとしています。問題は、コンテンツdivがその中にあるコンテンツに対して自動的に展開されないことです。CSSコンテンツを作成するDIVコンテンツの後の自動サイズ
私は自動的にサイズを変更したいので、CSSの高さを手動で設定する必要はありません。
私が作ったCSSコード：
#Container {
position: relative;
width: 800px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
border-bottom: 1px solid #000001;
background-color: #C1E9FF;
}
#LogoContainer {
background-image: url('/media/Logo.png');
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: rgb(0,0,1);
border-bottom-color: rgb(0,0,1);
border-right-style: solid;
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
z-index: 1;
}
#LikeBar {
border-bottom-width: 1px;
border-bottom-color: rgb(0,0,1);
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
left: 400px;
z-index: 1;
}
#ButtonHome {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
top: 50px;
z-index: 1;
}
#ButtonVideo {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
left: 105;
top: 50px;
z-index: 1;
}
#Footer {
border-top-width: 1px;
border-top-color: rgb(0,0,1);
border-top-style: solid;
width: 800px;
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
}
#Content {
position: absolute;
top: 90px;
width: 800px;
height: 95%;
border-top: 1px solid #000001;
}
#YouTubeBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 10px;
text-align: center;
}
#TwitterBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 110px;
text-align: center;
}
#FaceBookBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 210px;
text-align: center;
}
.DivT { line-height: 1px }
HTMLコードDIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>HTML CODE</title>
<meta name="description" content="Null" />
<meta name="keywords" content="Null" />
<link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>
<body background="/media/Background.png">
<div id="Container">
<!-- Start Container -->
<div id="LogoContainer"></div>
<div id="LikeBar"></div><!-- Menu Controls -->
<div id="ButtonHome"></div><!-- WEBSITE CONTENT -->
<div id="Content">
<p class="DivT">We're upgrading the website with a new design and hopefully it will
be faster, so check back later.</p>
</div><!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer"></div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>
だから、何が間違っていると？私は手動で高さを設定しないように時間を節約したい。
誰かがあなたが投稿したCSSを読んで読んでくれると期待していますか？質問を投稿する際に読者を考慮してください。ヘルプは[こちら]（http://jsbeautifier.org/）、[ここ]（http://procssor.com/process）、[ここ]（http://infohound.net/tidy/）です。 – Bojangles
高さを変えよう：95％から最低高さ：95％ – ptriek
と[ここ]（http://jsfiddle.net）！ – MCSI