0

私は典型的なヘッダー、左の列、中央の列、右の列、フッターのレイアウトを実装しています。lft、mid、rightdivをmidBlockでラップしましたdiv。私はそれを明確にするために写真を含めています：

ここに画像の説明を入力してください

midBlockに10pxの下マージンを設定しましたが、フッターと重なっています。なんで？そしてそれを解決する方法は？

これがJSFiddleです。

これが私のCSSです：

body {
    background-image:url('./img/GreenLetters.jpg');
}

#blankPage {
    background-color: #fffffd;
    width: 1020px;
    margin: 0px auto;
    border: 0px;
    padding: 10px;
    position:relative;
}

#header {
    background-color: #000000;
    color:red;
    width: 1000px;
    margin: 0px 0px 10px 0px;
    border: 0px;
    padding: 10px;
}

#midBlock {
    margin: 0px 0px 10px 0px;
    border: 0px;
    width: 1020px;
    position:relative;
    left:0px;
    top:0px;
}

#leftCol {
    background-color: #123456;
    width: 160px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    position:absolute;
    left:0px;
    top:0px;
}

#midCol {
    background-color: #654321;
    width: 660px;
    margin: 0px 10px 10px 0px;
    border: 0px;
    padding: 10px;
    position:absolute;
    left:170px;
    top:0px;
}

#rightCol {
    background-color: #567890;
    width: 160px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    position:absolute;
    left:860px;
    top:0px;
}


#footer {
    background-color: #000000;
    color:red;
    width: 1000px;
    margin: 10px 0px 0px 0px;
    border: 0px;
    padding: 10px;
    position:relative;
    left:0px;
    top:0px;
}
4

1 に答える 1

0

私は次のように設定することで解決策を見つけました：

min-height:1px;
overflow:auto;

midBlockcssで。これがJSFiddleです。

別の問題が発生しますが、ここで解決策が見つかりました。

于 2013-01-12T09:51:50.243 に答える