4

単一ページのスクロールから Web デザインに取り組んでいますが、このコードを機能させることができません。

私がやろうとしているのは、JavaScript を使用してユーザーの画面の高さを取得することです。

次に、この画面の高さを div クラスに適用して、ユーザーの画面解像度のサイズのコンテナーを常に持つようにします。いわば常に画面にフィットするリキッドデザイン。

可変画面の高さをどこにしたいかの短い例を次に示します。

<script type="text/javascript">
function matchHeight() {
$('.container').css('height',$(window).height);
};
</script>

<div class="container"> I want this container to be the height of the users screen resolution. </div>

.container { width:100%; height: /* javascript value */ }

ヘルプは非常に高く評価されます! 前もって感謝します。

編集:完全なドキュメントのFiddleを追加しました。

4

3 に答える 3

3

あなたが求めていることは、まったく難しいことではありません。必要なのは、1 つの優れた JavaScript 関数と、HTML コードへの簡単な小さな変更だけです。

<div>まず、 HTML に簡単な変更を加えて、「コンテナー」に ID を与えます。

<div class="container" id="container">
I want this container to be the height of the users screen resolution. 
</div>

次に、それを参照する JavaScript 変数を定義します。

var container = document.getElementById("container");

次に、JavaScript を使用して画面のサイズを取得するために常に使用しているこの便利な関数を使用します。

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
container.style.height = viewportheight+"px";
}

関数を入れたことに注意してくださいcontainer.style.height = viewportheight+"px";。これは、 が呼び出されるたびresize();にブラウザの寸法を更新し、それらの寸法をコンテナに再適用することを意味し<div>ます。

resize();この HTML を使用して、ページのサイズが変更されるたびに、またページが最初に読み込まれるときに、ボディで関数を呼び出します。

<body onload="resize()" onresize="resize()">

この関数は、コンテナー<div>をページ全体の高さにサイズ変更します。これに問題がある場合、または質問がある場合はお知らせください。

于 2013-01-21T18:02:29.287 に答える
1

cssでJSコードを使用することはできません。

あなたはこのようにあなたが望むことをするかもしれません：

$('.container').height($(window).height());

また

$('.container').height($(document).height());

ウィンドウまたはドキュメントの高さが必要かどうか。

于 2013-01-21T18:01:28.430 に答える
0

次のことはできません

.container { width:100%; height: /* javascript value */ }

ただし、高さを何らかの値に設定し、後でjQueryの.css()API を使用して変更することができます。

matchHeight()また、 内から関数を呼び出すようにしてください$(documeent).ready()。

===========================

containerクラスを次のように変更できます

.container { position:absolute: width:100%; height: 100%; }

===========================

または、使用できますcss media queries

于 2013-01-21T18:04:17.573 に答える