How to get rid of the empty space at bottom of page [duplicate]
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
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…
/* 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>
أضف إجابة