6

これを行う方法があるはずですが、そうではないのではないかと疑い始めています。

<div>ページのどこかにコンテンツがあります。

+---------------------------+
| Header                    |
+---------------------------+
|         |                 |
| Sidebar | Content         |
|         |                 |
|         |                 |
|         |                 |
+---------+-----------------+

私がやりたいのは、コンテンツの高さを<div>ブラウザ ウィンドウの下部と同じになるように設定することです。

私は絶対位置でこれを行うことができることを知っています。しかし、既存のレイアウト内でこれを行う方法はありませんか? 唯一の方法が JavaScript/jQuery を使用する場合、それがどのように達成されるかを知りたいと思います。

最終的に、ここでの私の目標は、 を<div>使用してこれをスクロール可能にすることoverflow-x: autoです。しかし、それを機能させるには、高さを固定する必要があります。

4

7 に答える 7

9

ここでは JavaScript を使用する必要があります - DOM の準備ができたら、コンテンツの高さをウィンドウの高さに設定します - ヘッダーの高さ

$('#content').height($(window).height() - $('#header').height());
于 2013-03-22T16:45:52.623 に答える
4

情報が不足しているため、ヘッダーの高さが固定されているか、問題を引き起こす可能性のある他の動的 div があるかなど、1 つの解決策が機能する可能性があります。

$(function () {
    "use strict";
    var resizeDiv = function (object) {
        object.height($(window).height() - $('#header').height());
    };


    $(window).ready(function () {
        resizeDiv($('#content'));
    });

    $(window).bind("resize", function () {
        resizeDiv($('#content'));
    });

});
于 2013-03-22T17:18:20.253 に答える
2

純粋な CSS ソリューションは次のとおりです。

html,body{
  height:100%;
}

#content{
  //assuming that 80px is the header's height
  height: -moz-calc(100% - 80px);
  height: -webkit-calc(100% - 80px);
  height: calc(100% - 80px);
}
于 2013-03-22T22:34:27.530 に答える
1

http://jsbin.com/ihemus/3/

これでよろしいですか？

html,body{
  height:100%;
  display:block;
}
#sidebar{
  background-color:orange;
  width: 20%;
  float:left;
  height: 100%
}
#content{
  background-color:gold;
  height: 100%
}

テーブルを使用して解決済み: http://jsbin.com/ihemus/15/

table{
  height:100%;
  width:100%;
}
html,body{
  height:100%;
}
于 2013-03-22T16:54:59.737 に答える
0

コンテンツ div でクラスまたは style="min-height:100%" を追加してみてください。うまくいくと思います。

JS を使用して、コンテンツの div に id="content" があり、ヘッダーに id="header" があると仮定すると、jquery では次のように実行できます。

$("#content").css("height",$(window).height()-$("#header").height);
于 2013-03-22T16:42:58.143 に答える
-1

ヘッダーとサイドバーの位置を固定します。その後、コンテンツはヘッダーとサイドバーなしで自動的にスクロールされます。
それは解決策になるでしょうか？

于 2013-03-22T17:02:53.030 に答える