How can solve the empty space at bottom of page?

user_19522719 0
Viewed 33

I'm coding my first website but unfortunately there is some unwanted empty space at the bottom that won't go away.

I've checked a lot of solves but they don't seem to be working. Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?

i can see this problem in all my html, usually if my html has content the problem doesn't but it reappears when i resize the screen with "inspect element" tool of any browser. As I said before, I tried a lot of solutions, even deleting whole lines of code to try to find the solution but I don't get anything...

enter image description here

/* General */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

.bodyBg {
    background-image: url(../img/bg/bgMain.jpg);
    background-position: center;
    background-attachment: fixed;
}  

/* HEADER*/

.headerMain {
    text-align: center;
    font-style: italic;
    background-color: rgb(30, 3, 68);
    font-size: 1.5rem;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* NAV */

.logoNavDiv {
    display: flex;
    justify-content: center;
    margin: -3% auto -4% auto;
}

.logoNavImg {
    width: 50%;
    height: auto;
}

.navMain {
    background-color: rgb(30, 3, 68);
    height: auto;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

.navUl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.navLi {
    list-style: none;
    margin-right: 2%;
}

.navLiMobile {
    display: none;
}

.navLink:hover {
    color: rgb(185, 13, 13);
    font-weight: 600px;
}

.navLink {
    color: white;
}

/* FOOTER */

.foot {
    background-color: rgb(53, 7, 119);
    display: flex;
    justify-content: center;
}

.footBox {
    padding-top: 0.5%;
    display: flex;
    flex-direction: column;
}

.footIconBox {
    display: flex;
    justify-content: center;
    list-style: none;
}

.footIconLi {
    padding-left: 2%;
}

.footIcons {
    width: 50px;
    height: auto;
}

.footText {
    color: white;
    text-align: center;
}

/* Noticias.hmtl */

.mainContainerNoticias {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer"
    ;
}

.headerNoticiasGrid {
    grid-area: header;

}

.mainNoticiasGrid {
    grid-area: main;
    background-image: url(../img/bg/bgSec.jpg);
}


.footerNoticiasGrid {
    grid-area: footer;
}

/* TOP Section */

.noticiasTopSection {
    margin: 0;
}

.noticiasCatUl {
    display: flex;
    border: 1px rgba(0, 0, 0, 0.048) solid;
    justify-content: center;
    margin-bottom: 1%;
}

.noticiasCatLi {
    list-style: none;
    padding: 2%;
    font-size: 1.5rem;
}

.noticiasCatLink {
    text-decoration: none;
    color: black;
}

.noticiasCatLink:hover {
    color: rgb(185, 13, 13);
    font-weight: 600px;
    border: none;
}

/* MID SECTION */

.noticiasMidSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.noticiasArtMain {
    display: flex;
    max-width: 23em;
    height: auto;
    border: 1px rgba(0, 0, 0, 0.048) solid;
    background-color: rgba(0, 0, 0, 0.11);
    border-radius: 8px;
    margin: 1%;
    overflow: hidden;
}

.noticiasArtImgDiv {
    width: 100%;
}

.noticiasArtImg {
    width: 100%;
    height: 13em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.noticiasArtDiv {
    width: 100%;
    height: auto;
    overflow: hidden;
    color: black;
}

.noticiasArtDiv:hover {
    color: red;
}

.noticiasArtH3 {
    font-size: 1.4em;
    font-weight: 600;
    padding-bottom: 0.5rem;
    text-align: center;
}

.noticiasArtP {
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PCNEWS-Guias/Trucos</title>
    <link rel="shortcut icon" href="img/icons/icono.png" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="bodyBg">
    <div class="mainContainerNoticias bg22">

        <!-- HEADER -->

        <header class="headerMain headerNoticiasGrid">
            <div class="logoNavDiv">
                <a href="index.html">
                    <img src="img/icons/logo.svg" alt="logotipo" class="logoNavImg">
                </a>
            </div>
            <nav class="navMain">
                <ul class="navUl">
                    <li class="navLi navLiMobile"><a class="navLink" href="index.html">Inicio</a></li>
                    <li class="navLi"><a class="navLink" href="noticias.html">Noticias</a></li>
                    <li class="navLi"><a class="navLink" href="reviews.html">Reviews</a></li>
                    <li class="navLi"><a class="navLink" href="guias.html">Guias</a></li>
                    <li class="navLi"><a class="navLink" href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </header>

        <!-- MAIN -->

        <main class="mainNoticiasGrid">
            <section class="NoticiasTopSection">
                <ul class="noticiasCatUl">
                    <li class="noticiasCatLi"><a href="" class="noticiasCatLink">TODO</a></li>
                    <li class="noticiasCatLi"><a href="" class="noticiasCatLink">NOTICIAS</a></li>
                    <li class="noticiasCatLi"><a href="" class="noticiasCatLink">ARTICULOS</a></li>
            </section>
            <section class="noticiasMidSection">
                <article class="noticiasArtMain">
                    <a href="">
                        <div class="noticiasArtImgDiv">
                            <img src="img/noticias/new1.jpg" alt="GTX-3090-TI" class="noticiasArtImg">
                        </div>
                        <div class="noticiasArtDiv">
                            <h3 class="noticiasArtH3">Mineros están rematando sus tarjetas gráficas, pero muchas
                                tienen
                                chips
                            </h3>
                            <p class="noticiasArtP">Usuarios que compraron algunas de estas tarjetas descubrieron que las tarjetas fueron
                                modificadas en algún momento</p>
                        </div>
                    </a>
                </article>
                <article class="noticiasArtMain">
                    <a href="">
                        <div class="noticiasArtImgDiv">
                            <img src="img/noticias/new2.jpg" alt="Fall Guys" class="noticiasArtImg">
                        </div>
                        <div class="noticiasArtDiv">
                            <h3 class="noticiasArtH3">Tras el cambio a free-to-play, Fall Guys vive su mejor momento desde 2020
                            </h3>
                            <p class="noticiasArtP">El videojuego gratuito de Mediatonic la rompe en Twitch y Steam a pesar de desaparecer de la misma</p>
                        </div>
                    </a>
                </article>
                <article class="noticiasArtMain">
                    <a href="">
                        <div class="noticiasArtImgDiv">
                            <img src="img/noticias/new3.jpg" alt="GoreMagala" class="noticiasArtImg">
                        </div>
                        <div class="noticiasArtDiv">
                            <h3 class="noticiasArtH3">Publican nuevo trailer de Monster Hunter Rise con Astalos y Gore Magala
                            </h3>
                            <p class="noticiasArtP">Es momento de que conozcas cómo te harán sufrir estos iconicos enemigos de antiguas entregas</p>
                        </div>
                    </a>
                </article>
                
        </main>

        <!-- Footer -->

        <footer class="foot footerNoticiasGrid">
            <div class="footBox">
                <ul class="footIconBox">
                    <li class="footIconLi"> <a href="https://www.instagram.com/lucasdxvid/" target="_blank">
                            <img src="img/icons/instagram.svg" alt="instagram" class="footIcons"> </a>
                    </li>
                    <li class="footIconLi"> <a href="https://www.reddit.com/user/Athloner44" target="_blank">
                            <img src="img/icons/reddit.svg" alt="reddit" class="footIcons"> </a>
                    </li>
                    <li class="footIconLi"> <a href="https://www.youtube.com/channel/UCy_yWEbpB7axwSH3Qlthcnw"
                            target="_blank">
                            <img src="img/icons/youtube.svg" alt="youtube" class="footIcons"> </a>
                    </li>
                </ul>
                <div>
                    <p class="footText">www.PCNEWS.com y el logotipo son marcas registradas. Derechos Reservados ©
                        ATHL.COM
                        S de R.L. de C.V. </p>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>

flexbox grid css html
1 Answers

I can help! The problem is the height of your body, which can be solved with the following CSS:

body {
  min-height: 100%;
}

Then to give the appearance of no empty space, you can position your footer element all the way at the base of the page, like so:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
user_64561630
Related