Web ページのレイアウトに取り組んできましたが、最小限の例で実行しても、サイト テンプレートに転送すると機能しません。
最初は、いくつかの CSS ルールなどが干渉するのではないかと考えましたが、doctype に絞り込みました。
次の例をクロムで実行すると、すべて正常に動作します。しかし、doctype (html、xhtml、strict、transitional、loose のいずれであっても) を追加するとすぐに、めちゃくちゃになります。そして私の「めちゃくちゃ」とは、css ディレクティブ「height: 100%;」を意味します。ID「コンテナ」のdivでは完全に無視されます。
誰かが問題のヒントを教えてくれますか?
<html>
<head>
<style>
body
{
margin:0px;
padding: 0px;
}
#container
{
display: table;
position: relative;
border: 1px dashed black;
height: 100%;
width: 100%;
}
#header
{
position:absolute;
top: 0px;
left: 0px;
width: 90%;
height: 100px;
border: 1px solid red;
}
#main
{
display: table-cell;
vertical-align: middle;
width: 100%;
border: 1px solid green;
}
#inner
{
position:relative;
margin-top: 100px;
width: 90%;
height: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="inner">
inner
</div>
</div>
</div>
</body>
</html>