html - CSS:制作一个DIV全屏宽高不改变里面绝对div的比例

Question

我创建了一个移动网站模板 (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;
}

谢谢!

Answer 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;
}