Me pueden ayudar a decirme porque me queda con scroll??? html <code><!DOCTYPE html> <html lang="en"> <head> ...

Cristian Aníbal Pérez Bohórquez

Pregunta

student•hace 4 años

Me pueden ayudar a decirme porque me queda con scroll???

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Somos una empresa de aprendizaje">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Red Express Domicilios</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure class="logo">
            <img src="./img/logo.svg" alt="logo">
        </figure>
        <nav>
            <ul class="main-nav">
                <li class="main-nav__item">
                    <a href="">Inicio</a>
                </li>
                <li class="main-nav__item">
                    <a href="">Quienes Somos</a>
                </li>
                <li class="main-nav__item">
                    <a href="">Productos</a>
                </li>
                <li class="main-nav__item">
                    <a href="">Aliados</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <aside>
            <div class="aside-div">Contenido 1</div>
            <div class="aside-div">Contenido 2</div>
            <div class="aside-div">Contenido 3</div>
        </aside>
        <section>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum sed ad inventore vel quibusdam. Sequi recusandae dolore iste odit? Voluptatem enim mollitia reprehenderit rerum est nisi ullam eligendi, asperiores nesciunt.
            Eius, voluptatum, nihil laborum, veniam nulla animi odio nesciunt dolor recusandae delectus adipisci sapiente sint illum nam distinctio impedit repudiandae? Facilis et molestias unde explicabo voluptatum quos ullam necessitatibus voluptatibus!
            Dignissimos minima illo facere, nostrum eligendi eum? Numquam harum in quidem sequi adipisci quo voluptate, repellat, quasi, vel amet explicabo fuga. Perspiciatis inventore rerum neque odit ipsum quae nisi quis.
            Repudiandae debitis quibusdam reiciendis vero unde illum perspiciatis doloremque sint illo. Id, modi molestiae! Id aut totam assumenda tenetur, magni quasi sit fuga, numquam modi, iusto quaerat corporis beatae suscipit?
            Soluta assumenda iusto fugiat quae, ex quos nulla perspiciatis? Eum iste dolorem veniam in dolores perferendis reiciendis officia incidunt voluptatum eos, voluptate ratione, culpa id molestias consectetur natus, magni harum!</p>
        </section>
    </main>
    <footer>
        registrado Cristian
    </footer>
</body>
</html>

css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
header{
    background-color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
}
.logo{
    width: 150px;
    margin-left: 10px;
}
.main-nav__item{
    display: inline-block;
    margin: 5px 5px;
    padding-left: 15px;
    padding-right: 15px;
    
}
.main-nav__item a{
    text-decoration: none;
    color: white;
}
.main-nav__item a:hover{
    color:red;
}

.main-nav__item a:active{
    color: red;
}

main{
    width: 100%;
    height: 80%;
    background-color: royalblue;
    display: flex;
}

aside{
    width: 30%;
    height: 100vh;
    background-color:salmon;
    padding-top: 10px;
}

aside div{
    width: 90%;
    height: 150px;
    background-color: red;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
}
.aside-div{
    margin-bottom: 10px;
}
section{
    background-color: slategray;
    width: 70vw;
    height: 100vh;
}

Eliezer Hernandez

student•hace 4 años

La razon por la que se produce un scroll es por la altura del elemento sidebar. Toma en cuenta que al colocarle al elemento sidebar "height: 100vh" le estas asignando exactamente la misma altura que tiene la viewport a eso añadele la altura del elemento header, imaginemos que la viewport mide unos 500px de alto, al aplicar el height: 100vh estas estableciendo al elemento sidebar que tenga una altura de 500px(la misma que la viewport) sin considerar que ademas de esa medida se sumara, la altura del header, lo que superara la porción de la pagina que la viewport puede mostrar a la vez por lo que te genera un scroll.

Me pueden ayudar a decirme porque me queda con scroll??? html <code><!DOCTYPE html> <html lang="en"> <head> ...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Me pueden ayudar a decirme porque me queda con scroll??? html <code>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Me pueden ayudar a decirme porque me queda con scroll??? html <code><!DOCTYPE html> <html lang="en"> <head> ...