私は、コンテンツを含むスライド div のリストを作成しようとしています。これは、フー ファイターが行っていることと非常によく似たものです。
私が理解したい主なことは、ブラウザのサイズが変更されたときに、各「スライド」を適切な高さに自動調整する方法です。私がリンクしたディスコグラフィーページで自分でチェックできます。これを達成する方法はありますか?私はそれがjavascript/jqueryのものになると仮定しています。
ブロック要素の高さを 100% にするには、すべての親も高さ 100% に設定する必要があることを知っておくことが重要です。
たとえば、私の if html は次のようになります。
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
myDiv の高さを 100% にするために必要な CSS は次のようになります。
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
#myDiv のすべての親も 100% の高さに設定されていることに注意してください。これは、ブロック要素の動的な高さを 100% にするための鍵です。
div
ブラウザウィンドウの高さにサイズを変更する例:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Chrome、IE9、Firefox、Operaでテストされており、すべてWindowsで実行されています。IE9では、正しく機能するためにDOCTYPEを指定する必要がありましたが、他のブラウザーは気にしないようでした。
JQueryの代替:ビューポートの高さに基づいてDIVの高さを動的に設定する