1

次のコードを使用して<div>、ブラウザウィンドウの上部と下部に「オーバーレイ」を動的に作成しています。

$(function() {
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  $('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
      winWidth + 'px;height:30px">TOP</div>');
  $('body').append('<div style="position:fixed;left:0px;top:' +
      (winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
}

トップ<div>は私が望む場所に正確に表示されます。

しかし、底<div>は見えません。グーグルクロームで調べてみると、ウィンドウの下にあるようです。

私がここで見逃したものを誰かが見ることができますか？

編集私の元のコードはhttp://jsbin.com/uravif/41で見つけることができます

4

4 に答える 4

2

誤解しているかもしれませんが、あなたのコードは私のために機能しているようです（ここにフィドルがあります）。

var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
      winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;top:' +
      (winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
于 2013-01-11T03:18:44.733 に答える
1

CSSに欠けているだけです：

body{
  height:100%; /* to fix jsBin bug with $(window).height() */
}

それ以外の場合は、もちろんではbottomなく、「BTM」:)要素の位置で遊んでください。top

編集 $(window).height()はオフラインでうまく機能するので、jsBinのバグをいじっていると思います

jsbinデモ

于 2013-01-11T03:10:29.107 に答える
1

これに使用できるボトムスタイル属性があります。

$('body').append('<div style="position:fixed;left:0px;bottom:30px;width:' + winWidth + 'px;height:30px">BOTTOM</div>');

下の属性は、画面の下部からxxピクセルに要素を配置します。

于 2013-01-11T03:11:01.650 に答える
1

以下を試してください：

$(function() {
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  $('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
      winWidth + 'px;height:30px">TOP</div>');
  $('body').append('<div style="position:fixed;left:0px;bottom:0px;width:' + winWidth + 'px;height:30px">BTM</div>');
}
于 2013-01-11T03:11:23.490 に答える