Question

我正在Twitter Bootstrap中创建一个网页（如果它很重要），我希望页面是100％;高度，因此页面底部或顶部不会有任何空白空间，因为它现在看起来像这样：

enter image description here

我希望它看起来像这样：

enter image description here

虽然长页面不应该在容器中有任何额外的空白，但它仍然是100％的高度，如下所示：

enter image description here

但我怎么能做到这一点？由于布局是液体？

Answer 1

试试这个

<html>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <body>
      <div id="fill">
        <div id="content"></div>
      </div>
    </body>
</html>

你的CSS就像

#content{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: black;
    display: block;
}

html, body {
    height: 100%;
}

#fill { 
    min-height: 100%;
    height: 100%;
}

Answer 2

我会使用display：table和display：table-row。对于不支持display：table的旧版浏览器，您可以使用Modernizr和jQuery后备。这是一个小提琴：

http://jsfiddle.net/85FHe/11/

有关CSS表格显示支持的更多信息，请转至http://caniuse.com/css-table。

Answer 3

这需要jquery，但似乎工作正常，以使整个页面无论屏幕尺寸如何，至少对我有用。

    var height = $(window).height();
    var cssheight = String(height)
    $('#tabs-1').css('height', cssheight);

拉伸页面总是100％高度？

3 个答案: