0

すべてが mainWrapper div と secondWrapper div 内にラップされている基本的な HTML ページがあります。

すべてが 960px サイズに設定されています (pageHeader、pageContent、および pageFooter)。

すべてを pageFooter から 960px 離す必要があります。

これは私のCSSコードです:

<style type="text/css">
<!--
body {
}

#secondWrapper {
        margin-left:auto;
    margin-right:auto;
    width:960px;
    min-width:910px;

}
#mainWrapper{
    margin-left:auto;
    margin-right:auto;
    width:960px;

}

#pageHeader {
    height:80px;
    width:100%;
    min-width: 918px;
    border-bottom: solid 1px #ededed;
    z-index:1000;
    position:relative;


}
#pageContent {
    clear:both;
    width:100%;
    min-width: 918px;
    background-image:url(img/map.png); 
    height:600px; 
    background-repeat:no-repeat;
    background-position:center;
    box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
    z-index:1;

}
#pageFooter {
    background-color:#CCC;
    width:100%;
    min-width: 918px;
}

#logo{
    position: absolute;
    margin-left:29px;
    background-color:#cb202d;
    width:120px;
    height:110px;
    top: 0;
    text-align:center;
    vertical-align:center;
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:24px;
    color:#FFF;
    font-weight:bold;
    float:left;
    z-index:1000;
        -webkit-box-shadow: 0 5px 6px -6px grey;
       -moz-box-shadow: 0 5px 6px -6px grey;
            box-shadow: 0 5px 6px -6px grey;
}

#logoTxt{
    position: relative;
    top:26%;

}

#yourCurrentTime{
    float:left;
    left:220px;
    top:10%;
    position:relative;
    border: 10px solid #1abc9c;
    border-radius:4px;



}

#arrow-down {
    position:absolute;
    width: -23px;
    height: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1abc9c;
    left: 99px;
    top: 30px;
}

#b {
    position:absolute;
    width:200px;
    height:115px;
    z-index:10000000;
    left: -59px;
    top: 48px;
    background-color:#333;
    display:none;



}

    div#a:hover div#b {
        display: inline;

    }
        div#a:hover {
            background-color:#eceded;
            cursor:pointer;


    }

            div#divBtn:hover {
            background-color:#4a4a52;
            cursor:pointer;


    }


    div#a{
    width:140px;
    height:47px;
    position:absolute;
    left: 825px;
    top: 0px;
    }


-->
</style>

Google と stackoverflow で見つかったいくつかのソリューションを次のように試しました。

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

しかし、それは私にはうまくいきませんでした！

どんな助けでも大歓迎です。

Jsfiddle は次のとおりです。http://jsfiddle.net/crf121359/jwgfH/

4

5 に答える 5

1 
You just need to take your pageFooter outside of the wrapper.

これが実際の例です： http://jsfiddle.net/jwgfH/3/

小さなフレーム内ではなく、ここでどのように見えるかを確認する必要があります: http://jsfiddle.net/jwgfH/3/show

于 2013-08-14T10:06:13.213 に答える
0

あなたのhtmlも表示できますか？親の div またはコンテナーの幅が 100% の場合、完璧な結果が表示されるはずです。

于 2013-08-14T09:54:54.490 に答える
0 
width: 100%;

親要素に幅が定義されている場合にのみ機能します。

body 要素に最大幅を指定してみて、それが機能するかどうかを確認してください

于 2013-08-14T09:48:58.920 に答える