0

http://jsfiddle.net/yLhh3/

非常にシンプルな CSS レイアウトに 3 つの列があります。それらのいずれかにコンテンツが追加されるまで、それらは完璧に見えるため、ページが強制的にスクロールされます (フィドルを下にスクロールします)。

私が望むのは、赤いボックスが常にページの下部に移動することだけです(ウィンドウ/画面、ページではありません)。これを CSS でどのように実現できますか?

.column
{
    background-color: red;
    width: 400px;

    /* Page height minus header */
    min-height: calc(100% - 192px);

    /* Align to bottom of the page */
    position: absolute;
    top: 192px; 
}

/* Half the page width minus (1.5 columns + offset between columns) */
.left { left: calc(50% - 630px); }
.right { right: calc(50% - 630px); }

/* Half the page width minus 0.5 columns */
.center { left: calc(50% - 200px); }
4

2 に答える 2

1

これについては常に問題と質問があり、それについては多くの方法がありますが、最も簡単なのは、絶対配置を使用しているため、「列」div を「中央」div 内にラップすることです。 

<div class="column center">
    <div class="column right"></div>
    <div class="column left"></div>
</div>

これにより、左と右の div を親の 100% 中央まで伸ばすことができます。フィドルでわかるようにheight: 100%、top: 0親の上部が子の 0 と見なされるため、含まれる列のように、css にいくつかのマイナーな変更を加えます。

jsfiddle

于 2013-08-16T21:31:07.207 に答える
0

あなたが達成しようとしていることを理解していただければ幸いです。

コンテンツを失わないように使用しましoverflow: scroll;た（必要に応じてYのみに設定するか、非表示にできます）。トリガーされなかったheightので、私も使用しましたmin-heightoverflow

.column
{
    background-color: red;
    width: 400px;

    /* Page height minus header */
    height: calc(100% - 192px);

    /* Align to bottom of the page */
    position: absolute;
    top: 192px;
    overflow: scroll;
}
于 2013-08-16T21:22:17.767 に答える