根据窗口宽度自动调整 div 高度答案

【问题标题】：Auto resize div height based on window width根据窗口宽度自动调整 div 高度
【发布时间】：2017-03-16 00:03:31
【问题描述】：

我似乎无法理解。我有一个 590px 屏幕宽度的媒体查询，以便有一个带有这个 CSS 的 div

#slider {
width:100%;
height:250px;
background-color:#FF0000;

但是现在我希望在您不断减小屏幕宽度（使用响应式设计）时将高度调整得更小（从 250 像素开始）。自动，100% 不起作用，因为我需要指定 250 像素的起始高度；而 max-height 什么也不做。

【问题讨论】：

标签： html height media-queries

【解决方案1】：

您可以使用jQuery 轻松做到这一点，方法是将窗口宽度存储在一个变量中，然后将该变量应用于元素的高度：

function changeHeight() {
    var width = $(window).width();
    $("div").css({
        "height": width
    });
}
window.addEventListener('resize', changeHeight);
changeHeight();

由于这段 javascript 代码使用 CSS 更改元素的高度，您甚至可以应用 CSS transitions 以使动画更流畅。

JSFiddle

JSFiddle Demo using CSS transitions

【讨论】：

将第 4 行更改为："height":Math.max(width, X); 并将X 更改为您想要的最小高度。您可以在此处了解有关 JavaScript max() 方法的更多信息：w3schools.com/jsref/jsref_max.asp。

【解决方案2】：

你必须把两个 CSS 属性都放进去

max-height:250px;
height:100%;

【讨论】：

试过这个。替换高度：250px；用你所拥有的，容器高度为 0 表示它不显示。

【解决方案3】：

有一个可怕的，可怕的黑客来做到这一点。但它通常比使用 JavaScript 调整元素大小更流畅。

利用填充值（事件垂直值）始终与容器宽度相关的事实。在滑块元素本身上设置一个带有百分比值的padding-top（你必须自己计算，因为你没有指定你认为的“正常屏幕宽度”），或者如果这把事情搞砸了，放一个额外的元素里面并设置填充。这当然会将所有正常的流内容向下推，因此您必须将它们绝对定位在魔术填充 div 的顶部。

另外，除非您绝对定位，否则块元素上的width: 100% 可能对您的情况没有用处。

【讨论】：

理论上有效，但内部元素 div 没有显示，因为我看到的只是填充空间。
要从里面的孩子的高度固定我的宽度，这适用于：填充：0.0001%。谢谢提示