Question

CSS中的

height: 100%显然不起作用。那么这个问题还有其他CSS或JavaScript / jQuery解决方案吗？请指教。

Answer 1

'假设你的问题元素是<div>。如果您确定<div>的身高可以参考，几乎所有问题都会消失：

#my_div
{
  height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}

确保<div>的父母也有设定的身高。我通常这样做（嗯，不完全是，但你明白了）：

#my_div, #parent_of_the_div, body, html
{
  height: 100%; /* This works, but it will show scrollbars if the body
                   or html elements have padding or margins. */
}

Answer 2

所以你想让div成为屏幕的高度？这有点不明显，但css高度是正确的方法。诀窍是你需要让html和body元素占据页面的整个高度，否则div占据了100％的空间。我发现这样做的最好方法是：

html {
    height: 100%;
}

body {
    height: 100%;
}

#contentDiv {
    min-height: 100%;
}

Answer 3

使用jQuery，您可以使用：

$('div.class').css('height', $(window).height()+'px');

Answer 4

Pure css

#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

祝你好运

或javacript Jquery：

准备好（ie8中不是innerHeight）：

$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

调整窗口大小：

$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

Answer 5

不需要Javascript，因为CSS3有一些新值来调整相对于当前视口大小的内容：vw，vh和vmin

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

所以你可以用你的风格写下来：

#contentDiv {
  height: 100vh;
}

Answer 6

我的答案建立在jonwayne的基础之上，因为没有太多解释。

您无法使用css获取用户监视器的值，但您可以通过javascript执行此操作。所以诀窍是将javascript添加到页面加载事件，该事件将根据浏览器窗口高度设置高度。使用jQuery，您可以使用以下代码段

执行此操作

// jquery shorthand for onLoad event
$(function() { 
    // Set the css height property of #div_to_resize to the css 
    // height property of the browser window
    $('#div_to_resize').css('height',$(window).css('height'));
}

如果调整窗口大小，您还可以选择附加到浏览器的resize事件以重置高度。结合之前的代码片段，它将是

// We extracted this to a function since we reference it more then once
function matchHeight() {
    $('#div_to_resize').css('height',$(window).height);
}

// jQuery shorthand for document.onload
$(function() { 
    matchHeight();
    //On the resize event, call matchHeight()
    $(window).resize(matchHeight);
});

Answer 7

您可能会发现一些有用的选项：

vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)

#container{
height: 100vh;
background: black;
}

Answer 8

我认为您无法通过任何网络技术获得显示器的分辨率。你做的是使用Javascript来获取浏览器的高度并在css中设置div的height属性。 This post可能有助于获得身高。

如何将div高度设置为用户监视器分辨率的100％？

8 个答案: