3

htmlページをブラウザウィンドウの下部に揃えようとしています。これは私のアプローチです：

<body>
  <div class="outer-wrapper">
  </div>
</body>

.outer-wrapper{
    min-height: 950px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

このソリューションの問題は、画面の高さが950ピクセルよりも小さい場合、外側のラッパーの上部が画面の上に表示されなくなり、スクロールが追加されないことです。ボディとアウターラッパーの両方に背景画像があります。

これがサンプルです。ご覧のとおり、赤いボックスの上部は体の上にあります。 http://jsfiddle.net/C5Nce/1/

4

4 に答える 4

0

私はあなたouter-wrapperに100％の高さを与えるでしょう（html、bodyと一緒に）：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.outer-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow-y: auto;
    background-position:bottom; //Edit
}

その後、outer-wrapperは常に体の高さを維持します。ビューポートが小さすぎてスクロールできない場合や、ビューポートが950pxより大きい場合（まあ、950pxより大きい場合）は良いことなので、950pxの高さの最小値は必要ありません。

于 2013-01-21T09:20:08.973 に答える
0 
.outer {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#aaaaaa;
    margin:0;
    padding:0;
}
.content {
    position:relative;
    width:90%;
    height:90%;
    background-color:#444444;
    margin:5%;
}
.inner {
    position:absolute;
    height:20%;
    width:100%;
    background-color:#eeeeee;
    bottom:0;
    margin-bottom:10%;
}

<div class="outer">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>

http://jsfiddle.net/L8H9J/

1）内部クラスからmargin-bottomスタイルを削除します

2）内部クラス内に追加するすべてのコンテンツは、下部に揃えられます

3）HTMLでのドキュメントのフローのため、明示的に下部に揃えることはできません

4）このトリックを使用してこれを行うことができますが、内部クラス内のすべての要素は次のフローになりますposition:static

5）JavaScriptを使用して、内部クラス内の各要素に適切なマージンを決定します。

ヒント： Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:

image-1 画像-2

于 2013-01-21T09:40:51.133 に答える
0

私があなたが正しく欲しいものを理解していれば、次のデモはうまくいくはずです：

http://jsfiddle.net/C5Nce/10/show/

メディアクエリを使用して、ページが550px未満であることを検出し、代わりに要素を上部に固定するように設定しました。

@media screen and (max-height: 550px) {
       .outer_wrapper {
           top: 0;
       }
}

クエリがいつ発生するかがわかるように、緑色に色を付けました。

于 2013-05-15T06:58:04.930 に答える
-1

ここでコードからセクションを編集します

.outer_wrapper 
{
    background-color:red;
    /*min-height: 550px;*/
    margin-left: -75px; 
    top:auto;
    bottom: 0;
    position: absolute;
    left:50%;
}

そして、あなたはあなたの赤い箱が体の上にあることを指定しています、あなたがそれを体の中に置くならば、あなたがまたmin-height容器の指定を持っているのでそれはそれのように置かれることになっています。

于 2013-01-21T09:17:37.130 に答える