Estoy tratando de colocar dos div, uno debajo de otro, que ocupen el ancho y alto de la pantalla. El código casi funciona correctamente. Y digo casi porque al añadir el segundo div éstos se dejan de ajustar completamente a los márgenes de la pantalla -aparecen los scrolls- y el texto deja de estar centrado:
<!DOCTYPE html>
<html>
<head>
<title>Medidas CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
*
{
margin: 0;
padding: 0;
}
#container
{
text-align: center;
}
div div
{
width: 100vw;
height: 100vh;
float: left;
color: white;
font-size: 20vw;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
div div:nth-child(1)
{
background-color: rgb(85, 27, 15);
}
div div:nth-child(2)
{
background-color: rgb(21, 77, 212);
}
</style>
</head>
<body>
<div id="container">
<div>div 1</div>
<div>div 2</div>
</div>
</body>
</html>
Cómo puedo solucionarlo?
Muchísimas gracias.