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
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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