0

ブラウザの高さに応じてdivタグの高さを自動調整するにはどうすればよいですか?
するとheight: 100%、そこにあるテキストの量に基づいてサイズが変更されるだけです。

これがWebページで、最初のdivです。青い背景のものは、高さを自動サイズ変更しようとしているものです:
http://rachelchaikof.com/awareness/

4

4 に答える 4

2

実際には、height: 100%;for 親要素を設定するには欠落している必要があります。また、これを使用して div の高さを 100% にするようにしてください。

html, body {
   height: 100%;
   width: 100%;
}
于 2012-12-08T07:51:39.843 に答える
0

レスポンシブ デザインに関して言えば、当面の問題にアプローチする多くの創造的な方法があります。

パーセンテージを使用して、デザインの応答性を高めることができます。パーセンテージを使用することは、ユーザー ビューポートで最大化するための安全な方法です。

例えば。

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

そこから、サイトのコンテナをいじって、より具体的に進めることができます。

また、HTML の head セクションにある JavaScript は、画面サイズを検出し、それに応じてさまざまな CSS ルールを調整するのに役立ちます。

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
           el.style.width='100%';
           el.style.height= windowHeight;
           el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

上記の JavaScript は、ユーザーの画面が 600px 以下かどうかをチェックしています。その場合、body 要素の幅、高さ、マージンのルールを調整します。

お役に立てれば！

于 2012-12-08T09:38:43.300 に答える
0

height:100%親と同じ高さ、つまり、あなたがdiv座っている要素を意味します。したがって、ブラウザと同じ高さにしたい場合は、すべての祖先を!100%まで高くする必要があります。html

于 2012-12-08T07:52:02.367 に答える
0 
100% height - resize window problem

"height:100%" は、ブラウザー ウィンドウの 100% を意味します。ページがブラウザー ウィンドウを超える場合 (つまり、アクセスするためにスクロールする必要がある場合)、ページのそれらのビットは、height:100% に設定された要素の外側にあります。背景やその他の効果 (境界線など) がある場合、最初の 100% を超えることはありません。

The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */

このように min-height を使用する場合は、すべての先行要素の高さが 100% に固定されていることを確認する必要があります (つまり、html と本文)。

または、Jquery を使用できます。

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
于 2012-12-08T07:53:11.013 に答える