css - blueprint cssを使用して行(またはdiv)を垂直に並べる方法は?

Question

次のhtmlコードがあります（指定された順序で）

<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>

そしてもちろん、上部にヘッダーパーツ、続いてコンテンツパーツ、そしてフッターを表示したいと考えています。青写真を使用して CSS コードでそれを行うにはどうすればよいですか?

PS : コンテンツ部分は、より SEO フレンドリーになるように最初に記述されます。

編集: ソリューションは、div セクションが記述されている順序で機能するはずです。たとえば、divの「コンテンツ」は、divの「フッター」の後にXHTMLファイルに書き込むことができます...しかし、コンテンツの下にフッターを表示したい（コンテンツによっては高さが不明です）

score 0 · Accepted Answer

絶対ポジショニングとブロックを任意のdivで使用して、ページ上の好きな場所に配置できるはずです。

たとえば、次のコードを使用します。

<div id="foo"></div>
<div id="bar"></div>

バーをfooの上に表示するには、fooが100pxの場合、次を使用します。

#bar{
   top:100px;
   left:0px;
   position:absolute;
   display:block;
}

score 0 · Accepted Answer

ブループリントがこの機能を提供するかどうかはわかりません。しかし、単純なcssで簡単に実行できます。

ヘッダーの高さは固定されていると仮定します。たとえば、100px です。

#header {
    height:100px;
    position: absolute;
    top: 0px;
}

#content{
    padding-top:100px;
}

アップデート：

同様の質問が2つ見つかりました：

それらは基本的に私の答えと同じです（divの上部の高さはわかっています）か、JSを使用して並べ替えます。

2 に答える 2