

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

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

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

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

[code]

    <html>
    <body>
    
    <div id="wrap">
    
    <header></header>
    
     <div id="contents">                                                                          
        <div class="main">
        </div>
     </div>
    
    <footer>
    </footer>
    </div>
    </body></html>
    
[/code]

css

[code]

    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;
    }
    
[/code]

追記

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

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


CC BY-SA 4.0
2018-05-15T11:49:26.440
44006
2019-08-14T03:03:30.413
2019-07-08T02:42:24.770
32986
27359
question
html css
css ネガティブ要素がある場合の幅を画面サイズで固定


`header`、`footer`を`#wrap`に入れて、なおかつ画面いっぱいにするのには何か理由があるのでしょうか。`#wrap`の外であればウィンドウ幅にするのは難しく無いです。また`header`、`footer`、`#wrap`で共通のスタイルがあるのであれば、同一のクラスに入れた方がわかりやすいかと思います。

状況を完全に理解できてないような気もするので、目的と違ってましたらご指摘ください。

[code]

    body{
      background-color:#555555;
      max-width:900px;
    }
    #wrap{
      background-color:#cccccc;
      max-width:500px;
      margin-left:10px;
    }
    #head{
      background-color:yellow;
    
    }
    #foot{
      background-color:green;
    
    }
    #main{
      background-color:red;
      width:100px;
      margin: 0 auto;
    }
    #page_head{
      background-color:pink;
      width:100%;
    }
    #page_foot{
      background-color:cyan;
      width:100%;
    }
[/code]

[code]

    <div id='page_head'>
      page head
    </div>
    <div id='wrap'>
      <div id='head'>
        wrap head
      </div>
      <div id='main'>
        main
      </div>
      <div id='foot'>
        wrap foot
      </div>
    </div>
    <div id='page_foot'>
      page foot
    </div>
[/code]


CC BY-SA 4.0
2018-05-22T14:16:10.810
44163
2018-05-22T14:16:10.810
3974
44006
answer