位置固定为100%高度 [英] Position fixed with 100% height
本文介绍了位置固定为100%高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用100%高度作为MAIN ID,但是当我将100%身高设置为主ID时,创意类被放置在主体上。当在不同的设备上使用像素为主时,它看起来不同。
有没有解决方法可以解决它?
#main {width:100%; height:675px;}。main {position:fixed;宽度:100%;身高:100%;背景:url(/images/logo/logo.svg)center no-repeat#ffcc00;}。introduction {position:relative;显示:inline-block; z-index:2;宽度:100%;身高:自动;背景:#fcd803; text-align:center; padding-bottom:40px;}。简介h1 {text-align:center;文字转换:大写; font-size:24px; padding-top:40px;}。简介span img {width:200px; padding-top:30px;}。introduction div {text-align:center; margin-left:30px; margin-right:30px; margin-top:30px; font-size:15px; line-height:21px;}创意{position:relative; z-index:2;宽度:100%; height:320px;背景:#fcd803;}。creativity-img {display:block;背景:url('/ images / ariadesk.png');背景重复:不重复;背景尺寸:包含;背景位置:底部;宽度:100%; height:320px; position:absolute;}。creativity-img div {position:relative; text-align:center; padding-top:145px;}。creative-img div h1 {font-size:20px; font-weight:normal; text-transform:大写;白颜色; border:solid 2px #fff;显示:inline-block; padding:10px 50px; }
< div id =main>< ; div class =main> < div class =logo>< h1> HUR< / h1>< br>< span> studio< / span>< / div> < div class =nav> < UL> < a href =#introduction>< li>介绍< / li>< / a> < a href =#ourwork>< li> work< / li>< / a> < a href =#chooseus>< li> service< / li>< / a> < a href =#client>< li>客户< / li>< / a> < a href =#aboutus>< li> team< / li>< / a> < a href =#contactus>< li> contact< / li>< / a> < / UL> < / div>< / div>< / div>< div class =introductionid =introduction> < H1>介绍< / H1> <跨度> < img src =/ images / icon / intro.svgalt => < /跨度> < DIV>< p为H.我们是一群超级书呆子和有才华的创意人员。创建尖端界面和视觉震撼媒体。< br>提供创新网页设计,平面设计,数字影像,广告和品牌服务的专家< / p> < / div>< / div>< div class =创造力> < div class =creativity-img>< / div>< / div>
$ b
解决方案
如果您不介意IE 8及以下版本,可以使用 vh
身高)单位:
#main {
width:100%;
身高:100vh;
}
I want use 100% height for MAIN id but when I put it 100% height to main id, creativity class is placed on the main. when use pixel for main in different device its look different.
is there any solution to fix it ?
#main {
width: 100%;
height: 675px;
}
.main {
position: fixed;
width: 100%;
height: 100%;
background: url(/images/logo/logo.svg) center no-repeat #ffcc00;
}
.introduction {
position: relative;
display: inline-block;
z-index: 2;
width: 100%;
height: auto;
background: #fcd803;
text-align: center;
padding-bottom: 40px;
}
.introduction h1 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 40px;
}
.introduction span img {
width: 200px;
padding-top: 30px;
}
.introduction div {
text-align: center;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
font-size: 15px;
line-height: 21px;
}
.creativity {
position: relative;
z-index: 2;
width: 100%;
height: 320px;
background: #fcd803;
}
.creativity-img {
display: block;
background: url('/images/ariadesk.png');
background-repeat:no-repeat;
background-size:contain;
background-position:bottom;
width: 100%;
height: 320px;
position: absolute;
}
.creativity-img div {
position: relative;
text-align: center;
padding-top: 145px;
}
.creativity-img div h1 {
font-size: 20px;
font-weight: normal;
text-transform: capitalize;
color: white;
border: solid 2px #fff;
display: inline-block;
padding: 10px 50px;
}
<div id="main">
<div class="main">
<div class="logo"><h1>HUR</h1><br><span>studio</span></div>
<div class="nav">
<ul>
<a href="#introduction"><li>introduction</li></a>
<a href="#ourwork"><li>work</li></a>
<a href="#chooseus"><li>service</li></a>
<a href="#client"><li>client</li></a>
<a href="#aboutus"><li>team</li></a>
<a href="#contactus"><li>contact</li></a>
</ul>
</div>
</div>
</div>
<div class="introduction" id="introduction">
<h1>introduction</h1>
<span>
<img src="/images/icon/intro.svg" alt="">
</span>
<div><p>
We are small team of super nerds and talented creatives. Create cutting-edge interfaces and visually stunnig media.<br>
Experts in providing innovative Web Design, Graphic Design, Digital Imaging, Advertising and Branding service</p>
</div>
</div>
<div class="creativity">
<div class="creativity-img"></div>
</div>
解决方案
If you don't mind IE 8 and below, you can use vh
(viewport-height) units:
#main {
width: 100%;
height: 100vh;
}
这篇关于位置固定为100%高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文