1

私は3つの部門を持っています。最初の div は相対的な位置で上部にあり、2 番目の div は下部にあり、その位置は絶対的です。真ん中にしたい3番目のdivもあります。ブラウザの高さを変更しても、1 番目と 2 番目に応じて 20px のパディングに揃えられるように、3 番目の div を中央に配置します。

middle-box{
padding: 20px;
}

.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}

.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}
4

2 に答える 2

0

この同じ質問のバリエーションは、SO で何十回も尋ねられています。20px の余白が必要であるという事実は関係ありません。難しいのは全体的な構造です。

これはあなたの要件を満たしていると思います。妥協しなければならない可能性のある 1 つの点は、ヘッダーとフッターに固定の高さを設定することです。

http://jsfiddle.net/Fd6f9/1

.top-box {
    height: 60px;
    position: relative;
}
.middle-box {
    position: absolute;
    top: 70px;
    bottom: 80px;
    left: 20px;
    right: 20px;
    margin: 20px 0;
}
.bottom-box {
    height: 56px;
    padding: 12px 0 12px;
    position: absolute;
    bottom: 0px;
}
于 2013-03-27T02:07:37.027 に答える
0

ボトムボックスをブラウザーウィンドウの下部に「固定」することを選択した場合、ミドルボックスとボトムボックスのコンテンツの量に応じて、ミドルボックスとボトムボックスの間に可変スペースができます。ビューアのブラウザ ウィンドウのサイズ。div 間の間隔を一定にする場合は、絶対位置を削除する必要があります。

また、css をクラスから ID (. から #) に変更することを強くお勧めします。ミドルボックスのクラス/ID マーカーを忘れたので、それも問題を引き起こしている可能性があります。

パディングは div の内側に影響し、マージンは外側に影響することに注意してください。

このコードはあなたが探しているものを提供しますか? (div に何が起こっているかを確認できるように、ビジュアル用に背景色を追加しました。)

<style type="text/css">
#top-box {
    width: 265px;
    position: relative;
    margin: 0px auto;
    background-color: #DDD;
}
#middle-box{
    margin: 20px 0;
    padding: 20px;
    background-color: #AAA;
}
#bottom-box{
    width: 25%;
    padding: 12px 0 12px;
    bottom: 0px;
    min-width: 300px;
    background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>

これらの div で何をしようとしているのかを知らずに、他に何を伝えるべきかを知ることは困難です。お役に立てれば！

于 2013-03-27T02:08:21.530 に答える