如何使用twitter bootstrap使多个列消耗100%的高度?

Joh*_*ler 9 css twitter-bootstrap

我已经看到了许多类似的问题,但没有找到我正在寻找的答案.更多信息如下:

  • 我正在使用twitter bootstrap,所以我想要一个兼容它的解决方案
  • 布局将如下所示.对不起,我无法嵌入图像因为我需要先打10分.
  • 和我到目前为止一样接近.问题是我不能让侧边栏停在页脚.
  • 我将需要主要内容扩展与侧边栏相同.
  • 侧边栏和主要内容是两种不同的颜色,大小不一.它们必须都延伸到页脚
  • 请注意,最小高度必须为100%
  • 如果内容增长太多,页脚应该移动(即需要滚动才能看到它)
  • 我不想使用JavaScript,但如果它是必需的,我不介意解决方案,只要它逐步增强JS(我也使用jQuery).
  • 页面内容水平居中,具有固定宽度

ter*_*ško 15

我想这可能是,你在寻找:两列布局 .

主要思想是设置height: 100%两者<body><html>确保容器也占据所有高度(通过min-height: 100%).您可能会注意到该代码还包含IE6的解决方法,因为它最初编写时,与IE6作战只是另一天的工作.

这是通过修改更复杂和更常用的圣杯布局 源来实现的.

  • 这如何回答"使用twitter bootstrap"的问题? (10认同)