I'm now on the point i want to open my window and dump my pc. I used the footer template from the tutorial of bootstrap.
It looks fine, but when my text is longer than one page, my footer stays on that location and goed not under the text like it shoud be.
I just want that when my page is longer, my footer stays on the end of the page. Not all my pages are gonne be this small. So please send some help :)
how it seems to work how its not working
.dropdown-toggle::after {
display: none;
}
.text-decoration-none {
text-decoration: none!important;
}
/* Font Awesome Icons have variable width. Added fixed width to fix that.*/
.icon-width {
width: 2rem;
}
nav .active a {
color: black;
font-weight: 600;
}
nav {
font-weight: bree, sans-serif;
}
.bg-world {
background-image: url('../img/bg-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
}
.padding {
padding: 10rem;
}
.box-land {
background: rgb(245, 245, 245);
background: linear-gradient(143deg, rgba(245, 245, 245, 0.8547794117647058) 49%, rgba(203, 186, 186, 1) 100%);
border-radius: 20px;
border: 3px solid black;
padding: 1rem;
}
.box-land h2 {
margin-bottom: 2rem;
}
.box-land img {
width: 100%;
margin-bottom: 1rem
}
.footer {
height: 3rem;
}
@media screen and (max-width: 1000px) {
.footer {
display: none !important;
}
}
.footer img {
height: 2rem;
width: auto;
margin-left: 100%;
margin-right: 0;
}
.footer .copyright {
margin-top: 0.25rem;
margin-left: 1rem;
}
.bg-strech {
height: 90vh;
}
.bd-placeholder-img {
background-image: url("../img/bg-1.png");
}
.card-img-info {
width: 100%;
height: 100%;
object-fit: cover;
}<!doctype htms>
<htms lang="en">
<head>
<meta charset="UTF-8">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/f47aba7ed6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css-js/style-main.css">
<title>Document</title>
</head>
<body >
<header >
<nav >
<div >
<a href="#">
<img src="assets/img/Logo_COW_Balk.png" alt="logo" width="100">
</a>
<button type="button" data-toggle="collapse" data-target="#navbar4">
<span ></span>
</button>
<div id="navbar4">
<ul >
<li >
<a href="index.html"> <span ><i ></i></span>Home</a>
</li>
<li ><a href="info.html"><span
><i ></i></span>Info</a>
</li>
<li ><a href="#"><span
><i ></i></i></span>Legende</a>
</li>
<li >
<a href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
><i ></i></span>Dropdown
<svg id="arrow" xmsns="http://www.w3.org/2000/svg" width="14" height="14"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
<div aria-labelledby="dropdown01">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
<li ><a href="#"><span
><i ></i></span>Contact</a>
</li>
</ul>
<ul >
<li >
<a href="#">
<i ></i><span >Twitter</span>
</a>
</li>
<li >
<a href="#">
<i ></i><span >Facebook</span>
</a>
</li>
<li >
<a href="#">
<i ></i><span >Instagram</span>
</a>
</li>
<li >
<a href="#">
<i ></i><span >Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main >
<div >
<div >
<div >
<div >
<figure >
<blockquote >
<p>Dit idee is ontstaan omdat ik interesse begon te krijgen in staatkunde en de administratieve onderverdeling van België. Ik zocht een kaart waar alle gemeenten opstonden met hun subdivisies, maar ik vond geen makkelijk toegankelijke kaart,
daarom ben ik op pad gegaan om zo'n kaart te maken met mijn kennis van grafisch ontwerpen en coderen. Het nut van de website is dat alle geïnteresseerden op één plaats terecht komen waar alles te vinden is. Dit is zowel voor oud als
jong. Zo kunnen mensen ook meer bewust worden van hun omgeving en land.</p>
<p>Ik kan dit natuurlijk niet alleen daarom zoek ik contact op met elke gemeente in België om info te vragen over hun gemeenten zoals: wat is de onderverdeling, waar liggen de grenzen, etc... Van veel gemeenten heb ik feedback gekregen
en dit helpt het proces te versnellen om het project af te werken. Ik doe dit alleen en op eigen initiatief daarom ben ik dankbaar voor alle mensen de mij willen sponseren en steunen in dit avontuur. Dank aan jullie allemaal.</p>
</blockquote>
<figcaption >
Achilles Gossaert (16) uit Roeselare
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</main>
<footer >
<div >
<div >
<div >
<img src="./assets/img/footer-img.png" alt="Achilles Gossaert" title="Argentum">
</div>
<div >
<p >©
<script>
document.write(/\d{4}/.exec(Date())[0])
</script>
COW. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</div>
<div >
<p>Design by <a href="https://onlinedevelopment.be">Online Development</a></p>
</div>
</div>
</div>
</footer>
<script src="assets/css-js/nav.js"></script>
</body>
</htms>CodePudding user response：
You need to give bg-strech a min-hieght: 90vh instead of height: 90vh so it grows if the content is so big.
CodePudding user response：
I've tested your code and everything is working fine on my end,
Can you tell me where is it that you're adding your content ?
