footer を横幅いっぱいに広げるがのうまくいかない

ヘッダーと同じようにフッターをcontainerなどで、囲まず、
メイン部分と切り離し、以下のように設定しましたが、1000pxで
途切れてしまいます。

HTML
<div id="footerWrap">
<div id="footer">
フッターに表示させる部分
</div>
</div>

CSS
#footerWrap{
width:100%;
background-image: url(images/footerback.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
z-index:1;
}
#footer{
width:1000px; /* フッター幅を指定*/
margin:0 auto;
}

それで以下のようにも試みましたが、横幅いっぱいに伸びるのは
いいのですが、横スクロールが出てきて、右側にスクロールすると
ヘッダーとメインが途切れて、フッターだけびろーんと右側に伸びた状態になります。

#footerWrap {
margin: 0 -500%;
padding: 0 500%;
}
はみ出た部分を消そうと、
これを
html {
overflow: hidden;
}

にすると今度は横スクロールが消えるのはいいのですが、縦スクロールも聞けて
上下にスクロールできなくなってしまいます。

いい方法はないのでしょうか？

No.2 ベストアンサー 回答者： MinervaAlice 回答日時： 2017/09/01 03:36

単純に

#footer {
width:1000px; /* ← width:100%; にすればいいのでは？ */
margin:0; /* ← 横いっぱいになるので、左右の「auto」はいらない */
}

上記ではなく、後者の横スクロールバーだけを消すのは
html {
overflow-x:hidden;
}

この回答へのお礼

MinervaAliceさん
なるほど、そうでした。ありがとうございます。

お礼日時：2017/09/01 16:45

No.1 回答者： t_fumiaki 回答日時： 2017/08/30 12:28

width:1000px;が余計。

この回答へのお礼

t_fumiaki さん　ご回答ありがとうございます。
ただ解決しませんでした。

自己解決しました。
以下のように横だけはみだし禁止にしたら大丈夫でした。

body {

position: relative;
overflow-x: hidden;

}

#footerWrap {
margin: 0 -500%;
padding: 0 500%;
}

お礼日時：2017/08/30 13:16