Hola a todos estoy realizando en desafio pero tengo un overflow en la parte horizontal y un scroll vertical, he hecho todo bien alparecer...

Alexis Steven Valderrama

Pregunta

student•hace 5 años

Hola a todos estoy realizando en desafio pero tengo un overflow en la parte horizontal y un scroll vertical, he hecho todo bien alparecer pero no quiero tener ese scroll, el error sale en la clase “main-content” usando un vw y wh de 100 %. Alguien me podria ayudar?

HTML

<body>
    <header class="header">
        <figure class="header__logo"> <!-- añadir imagenes de manera semantica -->
            <img src="./leon_logo.jpg" alt="Esta es una imagen de un león">   
        </figure>
        <nav class="nav">
            <ul class="nav__list">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main class="main-content">
        <section class="parent-container">
            <section class="parent-container__child-container">
                <p>Desarrollo web</p>
            </section>
            <section class="parent-container__child-container">
                <p>Productividad</p>
            </section>
            <section class="parent-container__child-container">
                <p>Finanzas</p>
            </section>
        </section>    
    </main>
</body>
</html>```

CSS

box-sizing: border-box;

margin: 0;

padding: 0;

}

html{

font-size: 62.5%;

}

.header .header__logo

{

position: absolute;

}

.header .header__logo img

{

width: 120px;

}

.header .nav

{

background-color: peachpuff;

padding: 20px;

list-style: none;

text-align: right;

border: 2px black solid;

font-size: 2rem;

}

.header .nav .nav__list li{

display: inline-block;

font-size: 20px;

margin: 10px 0;

padding-left: 20px;

padding-right: 20px;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

}

.main-content

{

width: 100vw;/* Ocupará el 100 % de la pantalla en ancho */

height: 100vh; /* Ocupará el 100 % de la pantalla en alto */

background-color: rgb(128, 100, 128);

font-size: 2rem;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

}

.main-content .parent-container

{

width: 25%; /* Ocupará el 100 % de la pantalla en alto */

min-width: 320px;

height: 500px;

background-color: rebeccapurple;

}

.parent-container .parent-container__child-container

{

width: 90%;

height: 40px;

padding: 50px;

border-radius: 10px;

background-color: seagreen;

}```

Alexis Steven Valderrama

student•hace 5 años

gracias por tu aporte ya lo logre solucionar :)

Diego Iván Centeno

student•hace 5 años

Hola:wave: Sobre lo del scroll es porque el 100vh es de tu .main-content, entonces es 100vh de tu .main-content + el alto de tu header, podrías ponerle de height 100vh a tu body, sobre el overflow en el header no estoy seguro, no veo que le hayas dado un width a tu nav o a tu header quizá sea eso. Espero haberte ayudado:v:

Hola a todos estoy realizando en desafio pero tengo un overflow en la parte horizontal y un scroll vertical, he hecho todo bien alparecer...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]