Andres Condezo Monge
PreguntaAlguien sabe por qué en el minuto 7:22 sale un cuadrado blanco abajo si en el css esta el main con la propiedad de Height del 100vh?
el html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/styles.css"> <title>Medidas</title> </head> <body> <main> <section> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis eveniet sunt corporis repudiandae temporibus incidunt nisi voluptatum. Soluta explicabo provident sequi itaque blanditiis, totam ad quaerat molestias ullam. Consequatur, placeat. Libero provident, fugiat pariatur nulla harum repellendus ad laborum, voluptates consequatur sed adipisci. Numquam, commodi. Quas neque esse distinctio porro. Alias fuga voluptates laboriosam mollitia sint dolor quaerat distinctio quisquam. Consectetur, debitis? Saepe hic nemo doloremque dicta numquam non nobis ratione nostrum rem repellendus dignissimos quidem magni consequuntur deleniti, quae distinctio, ullam placeat quod officiis facere alias suscipit eius ut. Praesentium dignissimos corporis rerum, vero harum sequi quam velit adipisci fugiat ut, eius iste, ipsam labore ipsa totam et? Nam suscipit modi obcaecati ea nemo, esse eligendi quia facere! Libero! Dolores soluta impedit eaque voluptates, fuga nostrum molestias corrupti aliquid et id culpa est enim, deleniti exercitationem quod placeat veritatis aut quisquam! Dolor id laborum odio perspiciatis soluta, deserunt saepe! At atque consectetur eum perferendis saepe velit earum esse illum, nostrum amet maxime enim autem sapiente. Corporis animi eos impedit, sapiente itaque velit? Debitis sint in tempore odio, harum sunt? Neque, dolore libero. Vitae eum deleniti quos earum aspernatur nemo porro expedita odit esse praesentium accusantium laudantium nam veniam ad reiciendis ratione illo, architecto temporibus necessitatibus fugit aut. Minima, quibusdam? Soluta placeat vitae ratione doloremque beatae fugiat magnam optio iusto fugit dignissimos accusantium molestiae, assumenda debitis perspiciatis non laudantium, reprehenderit porro? Delectus in optio laborum consectetur nisi. Accusamus, adipisci fuga?</p> </section> </main> </body> </html>
El CSS:
*{ box-sizing: border-box; margin: 0; padding: 0; } main { width: 100vw; height: 100vh; background-color: coral; } section { width: 80%; height: 500px; min-width: 320px; max-width: 500px; background-color: wheat; margin: 0 auto; }
Andres Condezo Monge
aah es un tamaño fijo,ok ok, estaba confundiendo el concepto, Gracias por las respuestas!
Alberto Castro Flores
El viewport solo es la parte visible del navegador, tiene un tamano fijo.
Alberto Castro Flores
El viewport solo es la parte visible del navegador, tiene un tamano fijo.
Andres Condezo Monge
Pero 100vh no significa el total del height del viewport o sea que ¿no debería abarcar siempre el total de la pantalla del dispositivo?
Mauricio Moreno Morales
Eso pasa por que el contenido en texto no puede caber en el area que abarca 100vh, se desborda, requeriria un tamaño mayor posiblemente 120 130vh.
El area blanca es una zona vacia, un espacio blanco sobrante que tenemos que evitar.
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/achievements/badges-html-css-afa64acb-64a4-486d-96a5-f930fbb7ee32.png){kind=small}
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/courses/Opengraph-definitivo-html-css2.png)