Question

如何将我的第一个div设置为完整的窗口大小。由于暗示这些下面的代码，它显示我从上到下覆盖了40％，但我想将其div大小设置为从上到下覆盖至少80％。我需要在Css中暗示哪个Css属性。

HTML 我的页面 HTML

<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
 </head>    
<body>


<div id="a">

    <div id="t" class="d"></div>

    <div id="p" class="c"></div>

    <div id="t" class="e"></div>


</div>
<div id="second"></div>
<div id="third"></div>


</body>
</html>

CSS

@charset "utf-8";
 #first, #second,#third{
    width: 100%;
 }


#a{

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
    color: white;
    position: relative;
    height: 1300px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;

}

#second{

    background:url('images/ra1.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;

}
#third{

    background:url('images/rc11.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;

}
.d{
    margin: auto;
    position:relative;
    width:=218px;
    height: 73px;
    left: auto;
    top: 10%;
    background: url('images/Logo.png') top left;
    background-repeat: no-repeat;
    background-position-x:50px;

}
.c{
    margin: auto;
    position:relative;
    width: =774px;
    height: 209px;
    left: auto;
    top: 120%;
    /*width:=137px;
    height:88px;*/
    background: url('images/big_text.png');
    background-repeat: no-repeat;
    background-position-x:339px;
}
.e{
    margin: auto;
    position:relative;
    width: =127px;
    height: 37px;
    left:auto;
    top: 180%;
    background: url('images/scroll_text.png');
    background-repeat: no-repeat;
    background-position-x: 680px;
}

Answer 1

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

	// for height
	$("#a").height($( window ).height() - 100 ); // minus any value in pixel 

	// for width
	$("#a").width($(window).width());

});


</script>

Answer 2

使用％和vh的混合：

HTML：

<div>
</div>

不要忘记使用*：

设置页面

*{
    margin: 0;
    padding: 0;
}
div{
background: red; 
width: 100%; 
height: 100vh;
}

它将覆盖整个窗口，无论其大小

div大小覆盖窗口显示的80％

2 个答案: