Html 在 Twitter Bootstrap 中为列设置 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17920972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting 100% height to columns in Twitter Bootstrap
提问by Ahmar Ali
I am new to BootStrap so learning the ropes and understanding it. I am trying to acheive 100% height in column grid so that it covers 100% height of the page. Right now no height is set. When I try to specify the height of both columns col-lg-9 and col-lg-3 in pixels or % no change occurs. Don't know what might be the problem. Here is the basic structure I am using
我是 BootStrap 的新手，所以学习绳索并理解它。我试图在列网格中实现 100% 的高度，以便它覆盖页面的 100% 高度。现在没有设置高度。当我尝试以像素或 % 为单位指定 col-lg-9 和 col-lg-3 列的高度时，不会发生任何变化。不知道可能是什么问题。这是我正在使用的基本结构
<body>
<div class="row">
"Top bar"
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
side bar
</div>
<div class="col-lg-9">
side bar
</div>
</div>
And here is the css for each item
这是每个项目的css
@media (min-width: 1200px)
.container {
max-width: 1170px;
}
.row {
margin-bottom: 20px;
}
.col-lg-9 {
width: 75%;
padding: 10px 20px;
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border: 0 none;
padding-top: 3%;
min-height: 90%;
}
.col-lg-3 {
width: 25%;
background-color: #192D38;
color: #88A7A9;
min-height: 90%;
}
回答by Danield
try this:
尝试这个：
html,body
{
height: 100%;
}
If that doesn't work, then use inspect element, and verify that parent elements have 100% height. (Because if they don't - then child elements won't get 100% height unless they are position:absoluteor position:fixed
如果这不起作用，则使用检查元素，并验证父元素具有 100% 的高度。（因为如果他们不这样做 - 那么子元素将不会获得 100% 的高度，除非它们是position:absolute或position:fixed
