引导容器中高度为 100% 的内容

Question

我需要有关 css、html 和引导程序的帮助。

我怎样才能得到这样的效果： Layout

1. 标题 = Boostrap 导航栏（50 像素高度）
2. 容器 = 所有网站和中心内容的灰色背景
3. 左栏 = 菜单 - 宽度 220 像素
4. 右栏 = 白色背景和 100% 高度的内容
5. 页脚 = 粘性页脚（高度：50 像素）

我使用的中心：

<div class="container">

但我对 100% 高度内容和粘性页脚有问题。

Answer 1

你应该把你的css和html放在这里，这样任何人都可以很容易地给你推荐。

对于粘性页脚，您需要将其位置设置为绝对位置，并将主 div 的位置设置为相对位置。

喜欢：

html, body {
    height: 100%;
    min-height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
    position: relative;
}

.footer
{
    height: 20px; //according to your requirement
    position: absolute;
    bottom: 0px;
}

Answer 2

你需要这样做：Twitter Bootstrap: div in container with 100% height

html, body {
    height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
}