1

我正在 Twitter Bootstrap 中创建一个网页（如果重要的话），我希望该页面为 100%；高度，所以页面底部或顶部不会有任何空白空间，现在看起来像这样：

在此处输入图像描述

我希望它看起来像这样：

在此处输入图像描述

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

在此处输入图像描述

但我怎么能做到这一点？由于布局是流动的？

4

3 回答 3

0

试试这个

<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%;
}
​
于 2012-10-16T10:45:17.180 回答
0

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

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

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

于 2012-10-16T17:51:45.520 回答
0

这需要jquery，但似乎可以很好地获得整个页面，无论屏幕尺寸如何，至少对我有用。

    var height = $(window).height();
    var cssheight = String(height)
    $('#tabs-1').css('height', cssheight);
于 2013-06-01T21:00:43.580 回答