これはCSSのデザインでは大失敗ですか？

CSSの高さ100％は、マージンのサイズによって実際に100％より大きい要素の高さを与えます。または、別の方法を見て、高さ：100％は、要素の高さではなく、マージンを除いた要素の高さを設定します。これはCSSのデザインでは大失敗ですか？

次の無意味な結果。 HTMLの100％のBODYの100％が大きすぎてHTMLの100％以内に収まらないため、スクロールバーが生成されます。

<!DOCTYPE html> 
<html> 
<head><title></title> 
<style> 
html, body { 
height:100%; 
} 

#wrapper { 
height:100%; 
overflow: hidden; 
} 

#content { 
height:100%; 
} 

</style> 
</head> 
<body> 

<div id='wrapper' style='background-color:lime'> 

<div id="header"> 
<p>line 1</p> 
</div> 

<div id='content' style='background-color:pink'> 
<p>line 2</p> 
<p>line 3</p> 

</div> 
</div> 

</BODY> 
</HTML>

は

を与え、

をスクロールダウンこれは、CSSの設計で失態ですか？それとも他の場合には賢明に働くのでしょうか？

出典

2016-10-10 ChrisJJ

なぜページ全体のコンテンツと背景色を囲むカスタムクラスを使用しないのですか？これは問題を解決する可能性があります。 – ZombieChowder

マージンは、要素を互いに詰め込むのに役立ちますが、要素の意図されたサイズから独立している必要があります。要素の大きさを考慮した内部間隔が必要な場合は_padding_を使用しますが、これは規則が少し異なります（隣接する余白は重なり、隣接する余白は一緒に追加されます）。完全な高さが必要な場合は、通常、ボディパッディングとマージンを0に設定し、ページを別のコンテナにラップします。 – paddy

デザインエキスパートではありませんが、私はスクロールバーが常に存在するデザインを見てきました。たとえば、メニューバーのサイドムーブを避けるために、100％を上回る高さにすることがこれを達成する方法です。 – ochi

いいえ、これはCSSのデザインミスではありません。

ブロックレベルの要素のサイズ（幅と高さ）、マージン（ブロックレベルの要素を区切る間隔）、パディング（ブロックレベル要素の内部をブロックの境界。）

これらの概念の起源は、印刷出版から継承されたと私は想像しています。

出典

2016-10-10 01:35:42 colonelclick

あなたは、ビューポートの100％で100％を取得したいされている場合は、

body { 
    height: 100vh; 
    width: 100vw; 
}

を使用説明&ブラウザの互換性のためhttps://developer.mozilla.org/en/docs/Web/CSS/lengthを見てください。

出典

2016-10-10 02:32:17

この例を追加すると、垂直スクロールバーが削除されません。そして、水平スクロールバーを追加します – ChrisJJ

これはCSSのデザインでは大失敗ですか？

答えて

関連する問題