0

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.

2
  • Creo que no es necesario agregar el " float: left;" a tus contenedores, ya que usan el 100% del ancho de la página y no están colocados uno junto al otro.
    – Elboy
    Commented el 6 nov. 2020 a las 15:37
  • Esto sucede al quitar el float. Por lo que NO debe quitarlo. Verifica el codigo que estas mandando, no lo bases en una opinión ;)
    – Excorpion
    Commented el 6 nov. 2020 a las 18:44

1 respuesta 1

0

Prueba esto:
Por lo que entendi, solo son 2 divs en la pantalla completa, y le estas dando 100% del tamaño de la pantalla, debes darle 50% para que ocupen la mitad cada uno. Además de centrar bien el texto con line-height

div div
    {
        width: 100vw;
        height:50vh;
        float: left;
        color: white;
        font-size: 20vw;
        font-weight: bold;
        text-transform: uppercase;
        vertical-align: middle;
        display: table-cell;
        line-height: 1.5;
        text-align: center;
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.