具有 100% 高度和特定纵横比的 Div

Posted 2023-03-06

【中文标题】具有 100% 高度和特定纵横比的 Div

【英文标题】：Div with 100% height and a particular aspect ratio

【发布时间】：2013-09-19 03:45:39

【问题描述】：

我怎样才能拥有一个高度为 100% 且具有特定纵横比的 div，例如2:3？

例如，如果外部元素的高度为 900px，则内部元素的宽度应为 600px，但这应该是响应式的。

我不想为此使用任何 javascript。

使用 CSS3 灵活的盒子模型就可以了。

【问题讨论】：

您的问题存在歧义。如果您的 div 具有纵向类型的纵横比，则将其设置为 100% 高度是有意义的。如果您的 div 是横向类型，那么宽度 100% 是有意义的。请更详细地解释您要做什么。

是纵向类型纵横比的div。我希望它使用页面标题下所有剩余的屏幕高度。

你认为 Flexbox 适合解决这个问题吗？

相关：***.com/questions/12121090/…

【参考方案1】：

如果您的目标是支持 CSS3 的现代浏览器，您可以尝试以下方法。

考虑以下 HTML sn-p：

<div class="wrapper">
    <div class="inner">Inner content...</div>
</div>

并应用以下 CSS 规则：

html, body 
    height: 100%;

body 
    margin: 0;

.wrapper 
    background-color: lightblue;
    height: 100%;

.wrapper .inner 
    margin: 0 auto;
    background-color: beige;
    height: 100%;
    width: 66.6666666666vh;

.wrapper 元素占据了视口高度的 100%，因为我已经设置了 height: 100% 在 body 和 html 元素上。

内部包装器.inner 有一个height: 100% 并填充父块。

要设置.inner 宽度，请使用视口百分比长度vh，它会随父块的高度缩放。

在本例中，66.66vh 表示垂直高度的 66.66%，对应于 2:3 纵横比（宽：高）。

在 jsFiddle

上查看演示

参考：http://www.w3.org/TR/css3-values/#viewport-relative-lengths

浏览器兼容性vh 单位和其他垂直百分比长度在最新的浏览器中得到了很好的支持，更多详细信息请参见下面的参考。

见参考：https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility

使用间隔图像的替代方法

考虑以下 HTML：

<div class="ratio-wrapper">
    <img class="spacer" src="http://placehold.it/20x30">
    <div class="content">Some content...</div>
</div>

并应用以下 CSS：

.ratio-wrapper 
    position: relative;
    display: inline-block;
    border: 1px solid gray;
    height: 500px; /* set the height or inherit from the parent container */

.ratio-wrapper .spacer 
    height: 100%; /* set height: 100% for portrait style content */
    visibility: hidden;
    vertical-align: top;

.ratio-wrapper .content 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;

.ratio-wrapper 容器有两个子元素，img.spacer 和 div.content。 图像为纵向纵横比，例如 20x30 (wxh)，并使用height: 100% 设置为展开以填充父容器的高度。图像在视图中隐藏，但在父块中保留其空间。

.content 元素绝对定位以填充父容器，并且可以包含任何内容。因为.content的高度和宽度有限制，在某些情况下内容可能会溢出，所以设置overflow: auto可能比较合适。

查看演示：http://jsfiddle.net/audetwebdesign/BVkuW/

相关问答：In Fluid Container, Can I Make Elements as Tall as they Are Wide?

【讨论】：

这正是我想要的，太好了！唯一的问题是 android 浏览器目前似乎不支持 vh 单位。 Android有什么解决方法吗？我计划支持移动浏览器（Android 版本 3、Webkit、Firefox）和支持灵活盒子模型的现代网络浏览器。

我更新了我的答案，参考了我在另一个问题上发布的较早答案，该问题显示了另一种创建具有指定纵横比的响应式 div 的技术。

@cimmanon 我不确定 flex box 在这里是否相关，我没有太多经验。 OP想要支持Android浏览器，我已经没有想法了！ OP 提到了弹性框，我是在浏览器支持的上下文中提到它。

@cimmanon 我更新了我的帖子，考虑到你的 cmets。你有一个有效的观点。感谢您的帮助！

感谢您的回答。您发布的第二个链接是填充父元素的宽度，而不是所需的父元素高度。 cimmanon 发布的链接也是如此。 vh 和 vw 单位也不是我真正想要的，因为它们指的是视口高度/宽度，而不是父元素高度宽度。我一直在寻找其他方法，但找不到任何方法。似乎有一个子元素可以填充父元素的高度，同时保持特定的纵横比目前仅使用 css 是不可能的。无论如何，非常感谢您的努力。

【参考方案2】：

您可以通过将2px by 3px 图像和内部div 作为兄弟姐妹粘贴到应用了display: inline-block; 的外部div 中来做到这一点。现在，当您将图像设置为具有100% 的height，并且您将内部div 绝对定位为与其祖先一样高和宽时，您可以设置外部div 的height，并且所有涉及的元素的width 将完全相等，并且基于图像的纵横比。

这里有一个 jsFiddle 演示了这种方法。

HTML

<div>
    <div>2 by 3</div>
    <img src=".../twobythree.png" />
</div>

CSS

body > div 
    height: 300px;
    position: relative;
    display: inline-block;

img 
    display: block;
    height: 100%;

div > div 
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

【讨论】：

这基本上是 Marc 建议的替代方法，当外部元素或浏览器的高度发生变化时需要重新加载页面。