在响应式布局中设置元素高度？

Question

通常,什么标记和CSS会在响应式设计中创建一个基于百分比的高度的元素？如何使用Twitter Bootstrap构建2列(固定流体)布局？显示如何创建两个100%高度的列,但这会突破高度<100%.

具体来说,我有一个带有项目列表的侧边栏div,可能是短(空)或长(overflow: auto).但是因为没有父元素具有固定的高度,height: 20%;所以不起作用.如何在保持响应式设计的同时为侧边栏提供流畅的高度？

Answer 1

通常在父容器上具有流体填充底部解决了这个问题.

更多信息可以在这里找到:http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

更新:在js bin http://jsbin.com/obesuk/1/

加价:

<div class="obj-wrapper">
 <div class="content">content</div>
</div>

CSS:

  .obj-wrapper {
    position:relative;
    width:50%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
  }

Answer 2

您是否尝试过使用vertical-align: top的内联块属性？我最近看到这篇文章可能会帮助您解决问题。通常高度只是调整大小以适应内容，所以我不太确定你想要完成什么。查看这篇文章... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/