HTML，CSS响应式流体布局元素

Question

我正在搜索如何获得响应高度，我的意思是我有这个元素。

<div style="width: 100%;">
   <div style="width: 50%; float: left;"><input style="width: 100%; height: 20px" /></div>
</div>

因此，当我调整浏览器的大小时，我想按比例将元素的高度与宽度缩放，这可能吗？

Answer 1

尝试这个，

JSFiddle

的HTML

<div class="container">
<div class="inner">

<input class="input"/>

</div>
</div>

的CSS

.container {
    width: 100%;
}

.inner {
    position: relative;
}
.input
{
    position: absolute;
    padding-bottom: 10%;
    width:100%;
}

Answer 2

我不确定您当前的标记需要实现什么，但是通常您可以使用padding属性按比例更改元素高度。 如果填充设置为％，则其计算基于元素宽度。 但是，如果使用填充，则必须绝对定位元素的内容。

http://jsfiddle.net/jwt9s5sb/1/

.parent {
padding-bottom: 30%;
background: green;
position: relative;}

.child {
position: absolute;}