在响应布局中设置元素高度？ [英] Setting element height in responsive layout?

问题描述

一般来说，什么标记和CSS会在响应式设计中创建一个基于百分比高度的元素？ 如何构建2列（固定 - 流体）布局与Twitter Bootstrap？显示如何创建两个100％高度的列， 100％。

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%.

具体来说，我有一个侧边栏div，列出了一些项目，可能是短的（空的）或长的（ overflow：auto ）。但是因为没有父元素有固定的高度， height：20％; 不工作。如何在保持响应式设计的同时给边栏一个流畅的高度？

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?

推荐答案

容器解决了这个问题。

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

More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

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

update: on js bin http://jsbin.com/obesuk/1/

markup：

<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;
  }

这篇关于在响应布局中设置元素高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！