Question

我有基于twitter Bootstrap的HTML文档，如：

<DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<div class="container" id="main"></div>
<footer class="footer"></footer>
</body>
</html>

我知道<nav>高50 px，<footer>高20 px 我希望我的div与导航栏的20px和页脚的20px。另外，我希望滚动条只出现在div中，而不是整个页面上，所以我有一个像这样的CSS样式表：

 body {
    padding-top: 70px;
    padding-bottom: 40px;
    overflow: hidden;
}
#main.container {;
    overflow: auto;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 20px;
  text-align: center;
}

问题是，使用overflow：auto我必须定义div高度，我需要这个div来填充屏幕。有人能告诉我我该怎么做？

感谢您的帮助，氰化物

Answer 1

将容器放置在绝对位置并将其放在顶部＆＃39;和＆＃39;底部＆＃39;这样你就不需要使用高度！

QRectF QGraphicsItem::boundingRect() const
{
    return QRectF(780,425,60,30);
}

这样的事情 - DEMO

Answer 2

一种选择是在容器上使用绝对定位。

类似的东西：

#main {
  position: absolute;
  width: 100%;
  height: auto;
  top: 70px;
  bottom: 40px;
  overflow-y: auto;
}

Answer 3

我用jQuery解决了这个问题：

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    windowHeight = windowHeight - 110;
    $('#main.container').css('height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

但是，谢谢大家的回答。

Answer 4

据我所知，您不想定义高度以适应任何屏幕尺寸。

你可以设置高度calculate the size of the screen with javascript 然后设置新的高度（屏幕 - 导航 - 页脚），如

document.getElementById("container").style.height = new_height;

new_height必须是字符串。

在div中启用滚动条

4 个答案: