そこで、divを画面の高さ100%にする方法を調べたのですが、HTMLで最初のdivのすぐ下に別のdivを入れると、最後のdivしか表示されません。各 div がスライドのように動作する Web サイトを作成したいと考えています。
使用したコードは次のとおりです。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Test portfolio</title>
</head>
<body>
<div id="wrapper" class="overlay"></div>
<div id="wrapper2" class="overlay">allooo</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html, body{
background:url("backgrounds/escheresque_@2X.png");
min-height: 100%;
margin:0;
}
#wrapper{
height:100%;
background:#fff;
}
#wrapper2{
height:100%;
background:#c60;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}