25

http://cdpn.io/FykHr 組み合わせた CSS プロパティに問題があるようです:

position: absolute;
bottom: 0;

まず、.footer div が一番下にないことがわかります。ここで、font-sizeを からに変更120pxする50pxと、div は意図したとおりに機能しているようです。

.content div のサイズに関係なく、.footer div を下部に固定する (画面の下部に固定しない) ようにするにはどうすればよいですか。

4

2 に答える 2

47

position: relative;親コンテナに追加する必要があります。この場合は.wrapperです。

これは、絶対配置に関する優れたリファレンスページです。

于 2013-10-26T23:24:00.410 に答える
11

それを行うには 1 つの方法があります。

body {
    height: 100%;
    margin: 0;
}
html {
    padding-bottom: 50px;
    min-height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: red;
}

http://jsfiddle.net/n8UNM/

まだ1つの制限があります。フッターの高さを知り、2 か所に設定する必要があります。

于 2013-10-26T23:43:27.527 に答える