Question

通常，什么标记和CSS会在响应式设计中创建一个基于百分比的高度的元素？ How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?显示了如何创建两个100％高度的列，但这会打破高度＆lt; 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/

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

2 个答案: