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

Question

我需要 css、html 和 bootstrap 方面的帮助。

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

1. 标题 = Boostrap 导航栏（50px 高度）
2. 容器 = 所有站点和中心内容的灰色背景
3. 左栏 = 菜单 - 宽度 220px
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%;
}