我创建了一个移动网站模板(320x640)大小,问题是背景是图片,输入框是绝对位置(与背景图片有关)。我想让它100%宽度和100%高度,但绝对输入位置将不再与图片相关。
我想知道是否有快速css修复,因此用户的全屏将是320x640(y滚动没问题)但是320px宽度是将访问该页面的任何用户的100%。
这是jsfiddle演示:
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;
}
谢谢!
答案 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;
}