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

rm5edbpk 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(155)

一般来说，在响应式设计中，什么样的标记和CSS可以创建一个基于百分比高度的元素？How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?展示了如何创建两个100%高度的列，但这会在高度〈100%时中断。
具体来说，我有一个侧边栏div，其中包含一个项目列表，可以是短的（空的），也可以是长的（overflow: auto），但是因为没有父元素具有固定的高度，所以height: 20%;不起作用，我如何在保持响应式设计的同时给予侧边栏具有可变的高度呢？

css

来源：https://stackoverflow.com/questions/9432029/setting-element-height-in-responsive-layout

2条答案

按热度按时间

8i9zcol21#

- 更新日期：2022年**

您可以使用aspect-ratio css属性来实现这一点。
Codepen示例：https://codepen.io/chriscoyier/pen/rNOqdJd

- 旧解决方案**

通常在母体容器上具有流体填充底部解决了这个问题。
更多信息请访问：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;
  }

赞(0）回复(0）举报 2022-12-20

u5rb5r592#

您是否尝试过将inline-block属性与vertical-align一起使用：top？我最近看到了这篇文章，它可能会帮助您解决这个问题。通常，高度只是根据内容调整大小，所以我不太确定您想要达到什么目的。请查看这篇文章... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

赞(0）回复(0）举报 2022-12-20

我来回答

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

2条答案

相关问题

热门标签

最新问答