使用CSS更改浏览器高度时调整div宽度

为了保持div的宽高比，一直在寻找仅有CSS的解决方案的几天时间。重要的部分是div高度应该是浏览器窗口的高度（不滚动和不隐藏溢出），并且宽度百分比应该调整以保持纵横比正确。到目前为止我发现的所有东西（主要是填充技巧）都使用父元素的宽度来维持方面，并在div下面增加了很多额外空间，尤其是在大屏幕上的全屏幕中。使用CSS更改浏览器高度时调整div宽度

真的试图避免javascpript。

这里是我的基本设置：

::编辑::添加链接的jsfiddle - http://jsfiddle.net/SUbYB/ ::编辑2 ::只是使用jQuery来处理基于高度的div的设置宽度。谢谢大家！

样式

body, html{ 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    max-width: 100%; 
} 
.super-container{ 
    position: relative; 
    width: 69.8%; 
    height: 95%; 
    max-width: 2008px; 
    margin: 0 auto; 
    padding: 0 15.1% 0 15.1%; 
    background: rgba(200,200,200,.2); 
} 
.aspect-container{ 
    position: relative; 
    display: block; 
    height: 95%; 
    margin: 0 auto; 
    background: rgba(200,200,200,.4); 
} 
.aspect-critical-content{ 
    position: absolute; 
    top:0; right: 0; bottom: 0; left: 0; 
    background: rgba(200,0,0,.2); 
}

和HTML

<html> 
<head> 
</head> 

<body> 

<div class="super-container"> 
    <div class="aspect-container"> 

     <div class="aspect-critical-content"> 
     </div> 

    </div> 
</div> 

</body> 
</html>

感谢提前任何帮助！

来源

2013-11-10 Jeffrey_0100101001100101011001

你能提供一个小提琴或蹲跳？ –

http://jsfiddle.net/SUbYB/ jsfiddle链接到上面的代码 –

你可以尝试使用calc，如果跨浏览器对你来说不是太重要：https：//developer.mozilla.org/en-US/docs/Web/CSS/calc？redirectlocale = en-US＆redirectslug = CSS％2Fcalc –

关于什么的只是用：

display: table; 
display: table-row; 
display: table-cell;

这看起来像你的情况（additionaly到您的代码）：

.aspect-container{ 
    display: table-row; 
} 
.aspect-critical-content{ 
    display:table-cell; 
    height:100%; 
} 

.aspect-container2{ 
    display:table-row; 
    height:100px; 
}

和HTML：

<div class="super-container"> 
    <div class="aspect-container"> 
    <div class="aspect-critical-content"> 
     some text 
    </div> 
    </div> 
    <div class="aspect-container2"> 
    <div> 
     text2 
    </div> 
    </div> 
</div>

第二行我已经添加了，只是为了展示如何轻松地在同一个容器内玩另一个块的高度。

The code on plunker.

来源

2013-11-10 00:31:28 Agat

尝试过这一点，但当容器高度降低或增加时，容器（和孩子）不会调整到正确的宽度。 –

不确定我关注的是高度如何与评论中的宽度相关。 – Agat

目前，在我尝试的每个解决方案中，div的高度将随着浏览器宽度的改变而调整。我需要div的宽度来调整浏览器的高度。 –

可以使用此CSS-技术：

.aspect-container { 
    width: 100%; 
    height: 0; 
    margin: 0 auto; 
    /* this is a aspect ratio of 1:3 */ 
    padding-top: 33.33%; 
    position: relative; 
} 

.aspect-critical-content { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
}

填充顶部的为100的基础的值是纵横比。
小提琴：http://jsfiddle.net/mE4qG/

来源

2013-11-11 03:09:26

谢谢，但填充和边距从父元素的宽度中绘制它们的值。我需要窗口/父元素的高度作为设置.aspect-critical-container大小的驱动因素。越来越像这不仅仅是一个CSS解决方案。 –

使用CSS更改浏览器高度时调整div宽度

回答

相关问题