CSS：制作一个DIV全屏宽度高度而不改变里面绝对div的比例答案

【问题标题】：CSS: Making a DIV full screen width height without change the proportion of the absolute divs insideCSS：制作一个DIV全屏宽度高度而不改变里面绝对div的比例
【发布时间】：2015-03-05 21:34:35
【问题描述】：

我创建了一个移动站点模板（320x640）大小，问题是背景是图片，输入框是绝对位置（与背景图片有关）。我想将其设为 100% 宽度和 100% 高度，但绝对输入位置将不再与图片相关。

我想知道是否有一个快速的 css 修复，因此用户的全屏将是 320x640（y 滚动是可以的），但 320px 宽度是任何将访问该页面的用户的 100%。

这里是 jsfiddle 演示：

http://jsfiddle.net/t7mcn0me/

html：

<div id=mobile>
    <input style="position:absolute;top:10px;left:10px;">

</div>

css:

#mobile
{
    background:url('http://2.bp.blogspot.com/-oRxMu07qqUk/TqiWzl3hAaI/AAAAAAAACWc/EB6lFVu2PQI/s1600/greenlake__%252528www.mobile16.net%252529.jpg');
    margin:0 auto;
    width:320px;
    height:640px;
    position: relative;
    border:1px solid grey;
}

谢谢！

【问题讨论】：

我不太确定我是否跟随，但我相信你在这里想要的是，宽度设置为 100%，高度设置为自动 :)

标签： html css height width

【解决方案1】：

试试这个 http://jsfiddle.net/t7mcn0me/2/

html

<div id=mobile>
<input style=" position:absolute;top:10px; width: 100vw!important;">

css

 #mobile
{
    background:url('http://2.bp.blogspot.com/-oRxMu07qqUk/TqiWzl3hAaI/AAAAAAAACWc/EB6lFVu2PQI/s1600/greenlake__%252528www.mobile16.net%252529.jpg');
    margin:0 auto;
    width:320px;
    width: 100vw!important;
    height:640px;
    position: relative;
    border:1px solid grey;background-repeat:no-repeat;background-position:center;
}

【讨论】：