html/bodyの高さの下の空白を削除する：100％のレイアウト

私はページをページの高さの100％とページ幅の50％を占める2つの等しい領域に分割しようとしています。html/bodyの高さの下の空白を削除する：100％のレイアウト

しかし、これはページの下部に迷惑な空白を生じ、ページ全体に迷惑なスクロールバーが表示されます。

通常、私はブラウザのDOMインスペクタを使って、何が望ましくないスペースを引き起こしているのかを見つけ出しますが、空白がhtmlタグ（？！）の外にあるように見えるため、ここでは使用しません。

* { box-sizing: border-box; border: 1px solid red; } 

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

div { 
    display: inline-block; 
} 

#box1 { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
} 

#box2 { 
    height: 100%; 
    width: 50%; 
    background-color: green; 
}

私も管理JSFiddleを作成しました：次のように

HTMLは次のようにCSSがある

<body><div id="box1"></div><div id="box2"></div></body>

（明確にするために省略体の外のすべて）であります問題を再現する

私は同じように見えるthis questionに出くわしましたが、なぜこれが起こっているのか説明していない（this answerはimgタグが存在するときの説明を提供しています）、すべての修正はハックや回避策のようです。

編集：このコメント（消えたと思われる）に応じて、Firefox 49.02のFiddleとWindows 10のEdge 38.14393.0.0に問題が複製されます。これはChrome 54.0.2840.71でも発生しますが、（ウィンドウを最大化するとスクロールバーが動かないように見えます）。

出典

2016-11-12 studro

今、あなたは知りたい、または理由を知りたいですか？ Bdwを使用すると、overflow：hiddenもそのスクロールバーを削除することができます。オーバーフロー：隠されたスクロールバーを引き起こしている余分なスペースを削除します。 –

@Leothelion - はい - 何が空白を引き起こしていますか？ – studro

CSSブロック 'div {display：inline-block;}'は、インラインブロックの意味を読み込みます。更新されたホワイトスペースはありません - https://jsfiddle.net/ez4wm20c/ – Steve

私はあなたがdiv {display: inline-block;}を持っている何人かの人々がこれに追加されます確信しているが、ここで私の理解だ...

。インラインブロックは、ブロックのようなものですが、テキストとして扱われるため、行の高さが重要です。 CSSの最初の行を更新すると、...

* { box-sizing: border-box; border: 1px solid red; line-height: 0;}

...空白がなくなります。あなたが持っている空白の量を変更するには、あなたのフィドルの行の高さで遊んでください。値14px以上で空白を追加し始めました。

出典

2016-11-12 12:05:06 Steve

これはそうだ。私は[フレックスレイアウト]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）がこれらのハッキングの必要性を排除すると考えています。フレックスレイアウトでこのデザインをデモンストレーションするために、フィディルド（ここでは）（https://jsfiddle.net/m4a6d4gh/）を更新しました。 – studro

ああ、フレックスは私には新しいものですが、あなたのニーズに合っているようです。私はほとんどのPHPデベロッパーですが、あなたの質問は私の目を引いた！楽しくて、私の答えを受け入れてくれてありがとう！ – Steve

ボディータグCSSにoverflow:hiddenを追加するだけです。

* { box-sizing: border-box; border: 1px solid red; } 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
} 
 

 
#box1 { 
 
    height: 100%; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 

 
#box2 { 
 
    height: 100%; 
 
    width: 50%; 
 
    background-color: green; 
 
}

<body><div id="box1"></div><div id="box2"></div></body>

出典

2016-11-12 11:32:01

これは_wanted_スクロールバーも削除します。 – Marvin

@sachin私はすでに私のコメントでこのことについて言及し、あなたが解決策を知っているが、理由を尋ねるopを知っているので、必要なものを尋ねる。質問を最初に読んでから、答えとして投稿してください。そうすれば、SOサイトのスパムは無料になります。ありがとうございます –

その場合。スクロールバーを非表示にする必要があります:: - webkit-scrollbar { display：none; }オーバーフロー：オートを使用します。 –

html/bodyの高さの下の空白を削除する：100％のレイアウト

答えて

関連する問題