1

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>
4

1 に答える 1