2

このcssコードを使用しています：

/* status update page style */
#content_wrapper {
    display: inline;
    width: 80%;
    padding: 0;
    margin: 0 auto;
}
#content_update {
    display: block;
    float: left;
    padding: 20px;
    margin-top:20px;
    width: 100%;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
    display: block;
    float: left;
    padding: 20px;
    margin-top:20px;
    width: 100%;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
    display: block;
    float: right;
    width: 230px;
    padding: 20px;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* FOOTER */
#footer {
    width:100%;
    height:580px;
    position:absolute;
    bottom:0;
    left:0;
    border-top:4px solid #ed1c24;
    background-color:#eeeeee;
}

#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footerTop {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footerTopLeft {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopMid {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopRight {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    padding:0 15px 10px 15px;
}

しかし、divはフッターdivの後ろに表示されています。私はここでフィドルを作成したので、htmlも見ることができます - http://jsfiddle.net/wmrhC/

4

3 に答える 3

1

これは、フッターdivをブラウザー ウィンドウの下部に高さ で絶対的に配置するように設定したためです580px。これはdiv、通常のドキュメント フローから外れます。つまり、他の要素がその背後に隠れ始める可能性があり、580px高いため、ページ上の他のほとんどの要素がその背後に隠れます。z-indexフッターの を に設定することでこれを修正できますが、それはおそらくあなたが求めているものではありません。これは、 がフッターの後ろではなくフッターの上部に浮かび始める-1ことを意味するだけであり、それでも変わらないためです。divきれいに見えます。

現在設定している絶対配置を取り除く必要があります。また、ブラウザー ウィンドウの下部ではなくページの下部に固定するフッターを設定できるアプローチとして、CSS スティッキー フッターのようなものを検討する必要があります。 .

于 2013-05-10T08:28:22.317 に答える