CSS:制作DIV全屏宽度高度而不改变内部绝对div的比例

时间:2015-02-12 23:55:05

标签: html css height width

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

谢谢!

1 个答案:

答案 0 :(得分:0)

试试这个 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;
}