0

私は、コンテンツを含むスライド div のリストを作成しようとしています。これは、フー ファイターが行っていることと非常によく似たものです。

私が理解したい主なことは、ブラウザのサイズが変更されたときに、各「スライド」を適切な高さに自動調整する方法です。私がリンクしたディスコグラフィーページで自分でチェックできます。これを達成する方法はありますか？私はそれがjavascript/jqueryのものになると仮定しています。

4

2 に答える 2

2

ブロック要素の高さを 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% にするための鍵です。

于 2012-09-06T21:02:30.103 に答える
1

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の高さを動的に設定する

于 2012-09-06T19:45:28.770 に答える