位置固定为100％高度 [英] Position fixed with 100% height

问题描述

我想使用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;
}

Fiddle

这篇关于位置固定为100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！