- ベストアンサー
overflow:hiddenでスクロールバー
<div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞ええっとそういうものなのでしょうか。ちょっと変に感じてますが。 何のoverflowがhiddenなのかを考えれば明白です。 #header, #main, #footerに指定したoverflow:hiddenは、それらの要素内のはみ出しを無視する指定になります。 （ここでいう「はみ出し」はwidth, heightで指定した範囲外の部分です。） ということは、#header, #main, #footerが（ブラウザのリサイズなどで）bodyからはみ出した場合、bodyでoverflow:hiddenしていなければbodyのスクロールバーが表示されることになります。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
overflow:auto;だとスクロールバーが出ますが、hiddenだと出ないはずです。 overflow:hiddenを止めるか、---私はアクセスビリティ上問題があるので作っていません。ユーザーが視覚障害があるなどでフォントサイズを大きくすると、読めなくなってしまう。 特に、 <div id="header"> <div id="main"> <div id="footer"> には使うべきではない。 overflow:hiddenを使う必要があること自体がそもそも・・・スタイル上問題があるのではないですか？ [補足] <div class="header" id="Top"> <div class="class" id="main"> <div class="footer"> の間違いでは？？？ header,section,footerは、文書構造を示すclass名に一般的なもので、HTML5では、それぞれ<header><section><footer>として独立するもので、ひとつの文書内に何度登場してもよいものです。 スタイルを指定するとき、一意セレクタで指定すると、詳細度が高いこと、複数設定できないことなどの理由で使いません。 <body> ・・・【中略】・・・ <section> <h1>・・・</h1> <article> <header> </header> <section> </section> </article> <figure> ・・・ <footer> <footer> </figure> ・・とか・・・
お礼
先生にはいつもご丁寧に有り難うございます。 といいつつも混乱しています。 headerとかは以前クラスにしていたのですが、 色々と勉強している間にidにしている所が多いことに気付いて 全部書き直しを終わったところです・・・ <footer>とか2回出てきてますし、そういうものでしょうか？ classが正しかったのですね。 overflow:hiddenはレイアウト上の問題なのですね。 文字を大きくするとか、そういうことは考えませんでした。 また、１からやり直しみたいですｏｒｚ＿
補足
id=headerで検索したら プロの方でも結構激しい論争があったようですね。 ちょっと変更が大変なのでこのまま行きます。 先生のことだから、丁寧な回答を頂いてしまうと思います。 この回はNo2様が適切なので、ここで締めます。 どうも有り難うございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご回答有り難うございます。 ブラウザ単位での考え方がよく分からなかったのです。 これが仕様なのか、当然の帰結なのか知りたかったのですが、 どうも当然の帰結のようですね。 しかし、overflow:hiddenは難ありと指導されたので もう一度検討してみます。