放<div>到瀏覽器窗口底部的高度

Question

雖然似乎應該有辦法做到這一點，但我開始懷疑沒有。

我的頁面上有一個內容<div>位於某處。

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

我想要做的是設置內容<div>的高度，使底部等於瀏覽器窗口的底部。

我知道我可以通過絕對定位來做到這一點。 但是在現有布局中沒有辦法做到這一點嗎？ 如果唯一的方法是使用 JavaScript/jQuery，那么我很想看看如何實現。

最終，我的目標是使用overflow-x: auto使這個<div>可滾動。 但是我必須有一個固定的高度才能使它起作用。

Answer 1

您必須在這里使用 javascript - 當 dom 准備好時，將內容的高度設置為窗口的高度 - 標題的高度

$('#content').height($(window).height() - $('#header').height());

Answer 2

由於缺乏信息，例如標題的高度固定，或者是否有其他可能導致問題的動態 div，一種可能有效的解決方案。

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


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

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

});

Answer 3

這是一個純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);
}

Answer 4

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%;
}

Answer 5

嘗試在內容 div 中添加一個類或一個 style="min-height:100%"，我認為它會起作用。

使用 JS，假設您的內容的 div 具有 id="content" 和標題 id="header"，因此在 jquery 中，您可以這樣做：

$("#content").css("height",$(window).height()-$("#header").height);

Answer 6

 var height = height_of_section('div'); document.getElementById('div').style.height = height; function height_of_section(id) { // elemet position on the window var element_position= document.getElementById(id).getBoundingClientRect().top; // window scroll y value from top var window_scroll = window.scrollY; var calc = window_scroll + element_position; return 'calc(100vh - ' + calc + 'px - 40px)'; };

 #div{ width: 100px; border: 1px solid; }

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="div"></div> </body> </html>

Answer 7

給你的標題和側邊欄一個固定的位置。 然后您的內容將自動滾動而沒有標題和側邊欄。
它可以是一個解決方案嗎？

放<div>到瀏覽器窗口底部的高度

問題描述

7 個解決方案

解決方案1
9 已采納 2013-03-22 16:45:52

解決方案2
4 2013-03-22 17:18:20

解決方案3
2 2013-03-22 22:34:27

解決方案4
1

解決方案5
0 2013-03-22 16:42:58

解決方案6
0 2020-05-06 05:14:46

解決方案7
-1

放<div>到瀏覽器窗口底部的高度

問題描述

7 個解決方案

解決方案1 9 已采納 2013-03-22 16:45:52

解決方案2 4 2013-03-22 17:18:20

解決方案3 2 2013-03-22 22:34:27

解決方案4 1

解決方案5 0 2013-03-22 16:42:58

解決方案6 0 2020-05-06 05:14:46

解決方案7 -1

解決方案1
9 已采納 2013-03-22 16:45:52

解決方案2
4 2013-03-22 17:18:20

解決方案3
2 2013-03-22 22:34:27

解決方案4
1

解決方案5
0 2013-03-22 16:42:58

解決方案6
0 2020-05-06 05:14:46

解決方案7
-1