htmlの表示の仕方の質問なのですが、メインの要素の両サイドにmargin: 0 auto;で余白を作って、ヘッダーとフッターにネガティブマージンとパディングを設定してヘッダーとフッターだけ余白の許す限り画面一杯の表示されるようにしています。

気づいたら画面の右にかなりスクロールできてしまうようになっていて、これがなかなかうまく対応できず困っています。この時フッターだけは画面一杯になっていました。

このような場合どのような対処をしたらよいでしょうか？よいcssの掛け方など教えていただけたら幸いです。

viewですが膨大な記述になってしまうので簡素にして参考までに載せさせていただきます

<html>
<body>

<div id="wrap">

<header></header>

 <div id="contents">                                                                          
    <div class="main">
    </div>
 </div>

<footer>
</footer>
</div>
</body></html>

css

html {
    overflow: auto;
    min-height: 100%;
    position: relative;
}

body {
    overflow: hideen;
    margin: 0;
}

#wrap {
    width: 1100px;
    margin: 0px auto;
}

#contents_admin {
    margin: 10px 0px 10px 0px;
}

header {
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
}

footer {
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
    height: 70px;
    position: absolute;
    bottom: 0;
}

追記

単純にやると、htmlのcssにoverflowがautoになってるところを、overflow-x:hidden;で対応できました。

が、こちらウィンドウを小さくして要素がウィンドウよりも小さくなった場合に要素が見えてる部分しか見れなくなるのでできたら、要素がウィンドウよりも小さくなった場合にはスクロールが出てくるようになると助かります。引き続き宜しくお願いしますm(._.)m