使用 Bootstrap 创建一个两列 100% 的布局
Posted
技术标签:
【中文标题】使用 Bootstrap 创建一个两列 100% 的布局【英文标题】：Creating a two-column-100% layout with Bootstrap 【发布时间】：2012-10-19 15:58:42 【问题描述】：所以我正在尝试使用 twitter bootstrap 和 Ryan Fait 的粘性页脚创建布局
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="user-panel">
<h1>Side Panel</h1>
</div>
<div class="content">
Hello World!
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
我似乎无法将用户面板和内容扩展到 100% 高度，尝试了这些但它们不起作用：
http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background
http://fiddle.jshell.net/teresko/UG8Rk/show/ 我需要圆形边框所以...
这是 CSS...
/* 标题 */ .header 高度：40px； 边距顶部：0px； 边框：1px 实心 #999; -webkit-border-radius：0px 0px 5px 5px； -moz-边框半径：0px 0px 5px 5px； 边框半径：0px 0px 5px 5px； -webkit-box-shadow: #666 0px 1px 1px; -moz-box-shadow: #666 0px 1px 1px; 盒子阴影：#666 0px 1px 1px； 背景：#F3F3F1； 背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) ); 背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）； 背景：-moz-线性渐变（#F3F3F1，#2B2B2B）； 背景：-ms-线性梯度（#F3F3F1，#2B2B2B）； 背景：-o-线性渐变（#F3F3F1，#2B2B2B）； 背景：线性渐变（#F3F3F1，#2B2B2B）； -pie-background：线性渐变（#F3F3F1，#2B2B2B）； 行为：网址（/PIE.htc）； /* 标题结束 */ /* 页脚 */ .footer 边距顶部：12px； 背景颜色：#000； 边距底部：0px； 右边距：20px； 左边距：20px； 明确：两者； 高度：40px； 边框：1px 实心 #999; -webkit-border-radius：5px 5px 0px 0px； -moz-border-radius: 5px 5px 0px 0px; 边框半径：5px 5px 0px 0px； -webkit-box-shadow: #666 0px 1px 1px; -moz-box-shadow: #666 0px 1px 1px; 盒子阴影：#666 0px 1px 1px； 背景：#F3F3F1； 背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) ); 背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）； 背景：-moz-线性渐变（#F3F3F1，#2B2B2B）； 背景：-ms-线性梯度（#F3F3F1，#2B2B2B）； 背景：-o-线性渐变（#F3F3F1，#2B2B2B）； 背景：线性渐变（#F3F3F1，#2B2B2B）； -pie-background：线性渐变（#F3F3F1，#2B2B2B）； 行为：网址（/PIE.htc）； /* 页脚结束 */ /* Ryan Fait 的粘性页脚...带有一些自定义*/ * 边距：0； html，正文 高度：100%； .wrapper 填充左：20px； padding-right: 20px; 最小高度：100%； 高度：自动！重要； 高度：100%； 边距：0 自动 -4em； 。推 高度：40px； 明确：两者； /* 粘滞页脚结束*/ /* 用户面板（左侧带有导航等的侧面板）*/ .用户面板 边框：1px 实心 #999; -webkit-border-radius：5px 5px 5px 5px； -moz-边框半径：5px 5px 5px 5px； 边框半径：5px 5px 5px 5px； -webkit-box-shadow: #666 0px 1px 1px; -moz-box-shadow: #666 0px 1px 1px; 盒子阴影：#666 0px 1px 1px； 背景：#F3F3F1； 背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) ); 背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）； 背景：-moz-线性渐变（#F3F3F1，#2B2B2B）； 背景：-ms-线性梯度（#F3F3F1，#2B2B2B）； 背景：-o-线性渐变（#F3F3F1，#2B2B2B）； 背景：线性渐变（#F3F3F1，#2B2B2B）； -pie-background：线性渐变（#F3F3F1，#2B2B2B）； 行为：网址（/PIE.htc）； 宽度：175px； 向左飘浮; 身高：继承； 背景：灰色； /* 用户面板结束 */任何帮助表示赞赏...谢谢...
编辑：
感谢 Andrea Ligios 的提琴！
http://jsfiddle.net/RPFcN/2/
适用于 Firefox，但不适用于 Chrome...
【问题讨论】：
【参考方案1】：你好，凯文早安！， 将此代码放在您的侧面板元素中
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
希望这会有所帮助:)
【讨论】：
嗨，你好，早上好，我心爱的同事，来自我的立方体。谢谢...我调整了一些值以考虑页眉和页脚的高度。可以，谢谢。【参考方案2】：您可以使用 calc() CSS3 函数。
看这里：http://jsfiddle.net/RPFcN/2/
您指定display: inline-block 以保持块显示在行中，但具有块元素行为；
然后将user-panel 的height 设置为100% 减去页眉和页脚的高度、它们的边距和边框（总计：98 像素）。
“内容”的高度将为 100% 减去 94px，因为内容没有边框（而用户面板有 1px 的边框）。
编辑：然后你从包装类中删除 height: auto !important
【讨论】：
在 Firefox 中运行良好，侧面板和内容在 Chrome 中仍然不是 100% 高度......另外，有没有其他方法可以在不使用 CSS3 的情况下做到这一点？【参考方案3】：我用来完成这项工作的方式是……
HTML：
<footer>
<div class="container">
<p class="text-muted">Footer text you want here.</p>
</div>
</footer>
CSS：
html
position: relative;
min-height: 100%;
body
margin-bottom: 8em; /* Must be set to the same as footer height */
footer
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8em; /* Must be set at the same as margin-bottom in body */
【讨论】：
【参考方案4】：将display:inline-block 添加到.user-panel 和.wrapper
【讨论】：
以上是关于使用 Bootstrap 创建一个两列 100% 的布局的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Twitter Bootstrap v3.0 构建两列流体布局