-1

私はこのコードを使用しています。http://jsbin.com/ibecak/1/。ここから取得しました: http://peterned.home.xs4all.nl/examples/csslayout1.html。これはうまくいきます。

ただし、コンテンツ div (マゼンタ) をコンテナー div (黄色) のヘッダーとフッターの間のスペースに配置したいと考えています。

何も壊さずにどうやってそれをやっていくのでしょうか? display: table-cell と vertical-align: middle を #content に設定しようとしましたが、役に立ちませんでした。

私にとって重要なことは、ウィンドウが小さすぎると、すべてが重なるのではなく、フッターが押し下げられることですが、それでも #content を #container の残りのスペースの中央に配置できるようにしたいと考えています。

可能であれば、CSS だけでこれを行う方法を知りたいです。

ありがとう。

4

2 に答える 2

0

質問 - コンテナ div (黄色) のヘッダーとフッターの間のスペースにコンテンツ div (マゼンタ) を中央揃えにしたいと考えています。

コンテンツ div を垂直方向の中央に配置しようとする際の難しさは、高さがわからないことです。高さが固定されていれば、これを行うことができます。

例

div#content{
    height: 300px;
    position: absolute;
    top: 50%;
    margin-top: -150px; 
    // Negative margin is half the height of content div
    // To ensure it is in the middle
}

jQuery で高さを計算してから、css スタイルを設定できます。

于 2013-04-11T12:22:01.297 に答える
0

簡単なことではありません。高さの値が幅の場合、ブラウザーでは少しおかしくなる傾向があるため、問題はありません。

3 つ以上の div を使用する必要があります。

コンテンツ div を別の div 内に配置し、jquery を使用してヘッダーとフッターの間のスペースの高さを計算する必要があります。ヘッダーとフッターの高さが固定されていると、作業がしやすくなります。

高さを計算したら、コンテナ div 内に div を絶対配置して、スペースの中央に収まるようにする必要があります。

于 2013-04-11T10:52:11.900 に答える