6

このhtmlを考えると：

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

#bコンテナー ブロックの残りの垂直方向のスペースをすべて埋めたいので、次のように始めました。

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

高さも 100% です。これは、#b親コンテナ ブロックの高さを取得していることを意味します。500pxoverflow: hidden;#b

一方、ラップ#aして、上記#bと同じプロパティを持つ別の div を使用するとbody、望ましい結果が得られます。

#wrap {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

もちろん、このhtmlで：

<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>

私の質問は、なぜ同じプロパティで異なる動作をしているように見えるのですかdiv? bodyラッパーなしで同じ効果を得る方法はありますか？

質問を説明するために、2 つの jsFiddle を作成しました。

body タグをラッパーとして持つ jsFiddle: http://jsfiddle.net/3AMtG/

ラッパーとして div タグを使用した jsFiddle: http://jsfiddle.net/2QWn3/

同じプロパティを持つ 2 つの jsFiddle では、異なる結果が得られます。何故ですか？

4

3 に答える 3

8

プロパティには、 CSS2.1 仕様で説明されている、HTMLおよび要素に固有のoverflow特定の特別な動作があります。これらの特殊なケースは、通常の状況でページ全体のオーバーフロー設定の変更に対応するために用意されているため、作成者は単純に または のいずれかに設定する必要がありますが、両方に設定する必要はありません。htmlbodyhtmlbody

この場合、 に適用overflow: hiddenするとbody、実際にはビューポートに影響しbodyます (プレビュー ペインのサイズを変更して短くすることでこれを確認できます — プレビュー ペイン自体にスクロールバーは表示されません)。これにより、と#bの合計よりも小さい固定の高さを指定しても、通常どおりボディがオーバーフローします。つまり、最初から本体にセットしていないかのように。#a#b

ただし、 onoverflow以外に設定すると、ビューポートは の代わりに に指定された値を使用するため、on の宣言は影響を受けず、ラッパーと同じように動作できます。visiblehtmlhtmlbodybody

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

jsFiddle プレビュー

于 2013-03-17T15:02:27.170 に答える
0

body要素は、ブラウザウィンドウ内に表示される他の要素が存在するメインの親要素と見なされるため、widthおよびheightプロパティは適用されません。ベストプラクティスによると、2番目の例で行った#wrapperのようなdivコンテナを作成することをお勧めします。

于 2013-03-17T15:44:05.903 に答える
0

body と div はまったく異なります。日常業務では、このようにコードを作成するのが好きです。

<div class='xxx-ctn'>
  <div class='xxx-inner'>
    <div class='data-wrapper'>
      [p|ul|ol|h1-h6|article|section].....
    </div>
  </div>
</div>

わかりました、私はあなたの創設を見逃していますが、これは良いコーディング習慣だと思います.

于 2013-03-17T15:03:03.347 に答える