Html 在响应式布局中设置元素高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9432029/
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 element height in responsive layout?
提问by knite
Generally, what markup and CSS will create an element with a percentage-based height in a responsive design? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?shows how to create two 100% height columns, but this breaks for heights < 100%.
通常，在响应式设计中，什么标记和 CSS 会创建具有基于百分比的高度的元素？如何使用 Twitter Bootstrap 构建 2 列（固定 - 流体）布局？展示了如何创建两个 100% 高度的列，但这会在高度 < 100% 时中断。
Specifically, I have a sidebar div with a list of items, which may be short (empty) or long (overflow: auto). But because no parent elements have a fixed height, height: 20%;does not work. How can I give the sidebar a fluid height while maintaining a responsive design?
具体来说，我有一个带有项目列表的侧边栏 div，它可能是短（空）或长（overflow: auto）。但是因为没有父元素有固定的高度，height: 20%;所以不起作用。如何在保持响应式设计的同时为侧边栏提供流畅的高度？
回答by Varinder
Usually having a fluid padding-bottom on the parent container solves this problem.
通常在父容器上有一个流体填充底部可以解决这个问题。
More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
更多信息可以在这里找到：http: //www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
update: on js bin http://jsbin.com/obesuk/1/
更新：在 js bin http://jsbin.com/obesuk/1/
markup :
标记：
<div class="obj-wrapper">
<div class="content">content</div>
</div>
css:
css：
.obj-wrapper {
position:relative;
width:50%;
padding-bottom:40%;
height:0;
overflow:hidden;
}
.content {
position:absolute;
width:100%;
height:100%;
background:red;
}
回答by arnonate
Have you tried the inline-block property with vertical-align: top? I recently saw this article that may help you with your problem. Normally height just resizes to fit the content so I'm not exactly sure what you're trying to accomplish. Check this article out... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
您是否尝试过使用 vertical-align: top 的 inline-block 属性？我最近看到这篇文章可能会帮助您解决问题。通常高度只是调整大小以适应内容，所以我不确定你想要完成什么。看看这篇文章... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
