2012-02-17 30 views
0

このスニペットが画面の100%に拡大されない理由はありません...誰か知っていますか...私はそう思います...それを取得し、ここではフィドルません:http://jsfiddle.net/uuzbv/HTMLの基本:100%に拡大縮小しない理由

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body{ 
width:100%; 
height:100%;} 

.section{ 
    height:100%; 
    width:100%; 
    background-color:#000; 
    } 
</style> 
</head> 

<body> 
<div class="section"> 

</div> 


</body> 
</html> 
+0

ところで、CSSをjsFiddleの右上のボックスに配置することができます。自動的にすべて適用されます。 – ACarter

答えて

4

用途:

body, html { 
    width:100%; 
    height:100%; 
} 
2

あなたはHTMLのDOM要素に追加してみてくださいすることができます。コンテンツなしで話すのは難しいです。デフォルトでは、それら全てが完全なビューポートに引き伸ばされだって、HTML、身体およびセクション(フルビューポートをストレッチする場合)のプロパティwidth:100%

*{width:100%;height:100%;} 
1

使用は消極的または必要ではありません。 uは希望のピクセルの高さをheight: required pixelsのように設定できます。また改行しないスペースを使用することもできます。&nbsp;

1

これは位置決めの性質です。デフォルトでは、要素はposition:staticと設定されています。基本的には、要素がドキュメント内にあるように配置されると言われています。したがって、&lt;body&gt;要素で定義した高さのパーセンテージは、&lt;html&gt;要素によって設定された高さの規則に従わなければなりません。この場合、基本的に空の要素の高さです。気づいたら、身体の位置をabsolute or fixedのように設定すると、突然ボックスが広がります(relativeはそうなりません)。これは、ページの通常のフローから削除するためです。

しかし、ほとんどの人が指摘しているように、htmlとbody要素の高さと幅を設定するとこの問題が解決されますが、これは私が推奨するものです。これは、基本的にはページの本文内で動作するようにあなたの完全なウィンドウスペースを与える

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

:実際には、ほとんどのページに、私は私は通常で始まります。

関連する問題