0

そこで、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;
  }
4

1 に答える 1