0

ここでのこのソリューションと非常によく似た、ビデオストリームと静止画像用のスペースを確保するために、ブラウザーの下部から60 ピクセル上に大きなコンテナー div を配置しようとしています。

一般的なスティッキー/固定タイプのフッターとは異なり、コンテナーは、ページにアクセスし、その後のブラウザーのサイズ変更時にその場所に保持されますが、ユーザーがサイトのコンテンツを探索したい場合は上にスクロールできます。

サンプル サイトを見ると、ブラウザのサイズ変更で CSS プロパティの "top" が変化することがわかりますが、これを実現するメカニズムが見つかりません。

このような弾力性を実現するにはどうすればよいでしょうか。

事前にどうもありがとうございました！

4

1 に答える 1

2

次の行に沿ってJavascriptを使用してこれを行うことができます

setTop = function(e) {
    document.getElementById('content').style.marginTop = window.innerHeight - 60;
};

window.onresize = setTop;

完全な作業例:

<html>
<head>
    <title>My Page</title>
    <style type="text/css" media="screen">
    #content {
      width: 80%;
      margin: 0 auto;
      border: 1px solid black;
      height: 100%;
    }
    </style>
</head>
<body>

<div id="content">
  Here is the content...
</div>

<script type="text/javascript" charset="utf-8">
  setTop = function(e) {
      document.getElementById('content').style.marginTop = window.innerHeight - 60;
  };

  setTop();
  window.onresize = setTop;
</script>

</body>
</html>
于 2012-07-07T11:14:03.537 に答える