ブラウザの表示幅で100%指定が切れる

締切済

質問者：umioyo
質問日時：2014/10/30 14:01
回答数：2件

ちょっと現象を把握しきれていないのですが、100%指定をしている箇所が、ブラウザによって途中で切れる現象が確認できています。
具体的には、ヘッダにボーダーとして引いている線
<img src="xx.gif" width="100%" height="5">
と
フッタのdiv指定の箇所
<footer></footer>
width:100%;
としている箇所です。
通常のPCブラウザ表示では問題ありませんが、Chromeで、開発者ツールを右ペインに指定しているのですが、ここを開くと幅が縮まって、ブラウザの表示幅がサイトの全体幅よりも小さくなります。
その状態で本文部分を右にスクロールすると、100%指定した箇所だけが、その開発者ツールが開いた位置から表示されなくなります。
表示されないというと語弊がありますが、ボーダーの指定などが効いているので、「そこが100%として認識されている」という状態だと思います。
右にスクロールした状態でリロードすれば戻るのでは？と思いましたが戻りません。
また、開発者ツールを閉じて、普通の状態で画面幅を広げたり狭めたりすると問題なく表示されます。

それと、iPadのSafariでも同様の表示になっていて、こちらはページを開いた状態ですでに右側が欠けている状態です。
縦、横、どちらの向きも同じく右側が欠けます。
サイト自体は1024px幅で組んでいますが、768pxの位置までで、そこから先が表示されなくなります。

なんとなく、metaで幅をきっちり指定してあげるべきなのかなぁと思っていますが、同様の現象に悩まされた方いらっしゃいましたらよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： think49
回答日時：2014/11/01 18:57

CSS における width の % 指定は親要素の content-width (width指定) を100%とした場合の相対値ですが、HTML全体の幅は border, margin, padding, width の和算で求められます。

親要素の border, margin, padding 値が 0 を超えていた場合、HTML全体の幅が 100% を超過するので横スクロールバーが発生します。
http://hp.vector.co.jp/authors/VA022006/css/box. …
http://hp.vector.co.jp/authors/VA022006/css/visu …

対象の要素(#target1 とする)がbody要素直下に存在するなら、下記を指定すれば期待通りに動作すると思われます。

---
html, body { margin: 0px; padding: 0px; border-style: none; }
#target { margin: 0px; padding: 0px; border-style: none; width: 100%; }
---

# Re: umioyoさん

- 1
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/10/30 14:28

まずHTMLが誤り。

（※インデントは全角スペースに置き換えてある。）
[HTML4.01,XHTML1.0等]
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )ので・・
<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　<class="nav">ナビゲーション</div>
　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<p>本文記事</p>
　</div>
　<div class="footer">
　　この文書のフッタ
　</div>
</body>
[HTML5]だと
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<nav>ナビゲーション</nav>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<p>本文記事</p>
　</section>
　<footer>
　　この文書のフッタ
　</footer>
</body>
＞ヘッダにボーダーとして引いている線
　これはとってもまずいので、div.headerのborder-imageで指定するか、<hr>を書いておいてhrのスタイルを指定するほうが良いでしょう。

html,body{margin:0;padding:0;}
div.header,div.footer{width:1000%;}

[HTML5]
html,body{margin:0;padding:0;}
header,footer{width:1000%;}

なお、ウェブページ作成されているなら当然開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxお使いだと思いますが、そのアドオンfirebugを使用すると、そのあたりの関係が良く分かるのですが・・

- 0
- 件

通報する

この回答へのお礼

ご回答いただいてありがたいのですが、ヘッダとは上部を指していて、別に<header>のボーダーとして用いているわけではありません。
まぁ確かにimg width="100%"は一昔前の書き方なんで突っ込まれるだろうなとは思いましたが、とある事情により仕方なくそうしています。
どう使うかは別として構文的には間違っていない書き方をしていますけどね。

それよりも1000%に指定したらどうなるか・・・予想付きませんか？

ありがとうございました。

通報する

お礼日時：2014/10/30 15:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！