0

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

2
  • メインの要素はウィンドウより狭いかもしれなくて、それを中央に置きつつ、上下にウィンドウ幅を埋める要素を置きたいということでしょうか
    – packet0
    2018年5月20日 13:35
  • コメントありがとうございます!今の所幅によってデザイン変える(名前ど忘れ><)のはしないつもりで、メイン要素の横幅に関しては画面一杯もしくはそれ以下、それ以下の場合自動でmarginが横につく。縦は要素が少ない場合にフッターが一番下に配置され、要素がそれなりにある時は要素の下につくような感じにしたいといった感じです。のでコメントの通りだと思われます。 記事にあるように現在はヘッダーとフッターが横幅にネガティブマージンやパディングなどつけてメイン要素の横に余白ができる場合でもヘッダーとフッターだけは画面一杯に横に広がる状態にしてあるのですが、フッターを最下部に固定した辺りからだと思うのですが、右にものすごい余白ができてしまったという感じでございます。最後に追記載せましたのでよろしければご覧くださいm(._.)m
    – take
    2018年5月21日 9:20

1 件の回答 1

1

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

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

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%;
}
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。