I just start to learn Bootstrap with HTML and CSS. With bootstrap grid system I create 3 sections like
this. Everything is fine as long as you use >= medium screen.
The problem occurs when using one small screen (or you just zoom in), the content is bigger and the height longer. The footer end up middle of the screen like this.
I tried:
Set body height 100%
clear both
postion:absolute; bottom:0
I think the cause is coming from the div in the menu. When zoom in, the content stretching but the footer don't recognize it
#import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#500;700&display=swap');
html,body{
height: 100%;
width: 100%;
}
body{
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName{
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar{
background-color: #414141;
}
.nav-link{
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus{
box-shadow:none !important;
}
.nav-link:hover{
color:lightcoral !important;
}
.navbar-toggler-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
button.navbar-toggler{
border: 2px solid #FFA286 !important;
color:rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover{
background-color: rgba(235, 193, 193, 0.52) !important;
}
#media (max-width: 767.98px) {
.nav-item{
background-color: rgb(94, 94, 94);
border:#212529 2px solid;}
}
/* Navbar End */
/* Body Start */
#headerMenu{
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border:none;
margin-top: 7rem;
}
#bgimg{
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box{
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color:white;
cursor: pointer;
}
.box:hover .menuhead{
color: lightcoral;
}
.contentMenu{
text-indent: 1.8rem;
}
/* Body End */
/* Footer start */
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
/* Footer end */
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box"> <section>
<h1 class="text-center text-uppercase text-white pt-4 " >Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section></div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4" >Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start footer_main">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Here you go...
1. Wrap the div that contains your main content. Consequently, your main content will stop overlapping the footer.
So, change this...
<div class="container w-100 h-100">...</div>
...into this.
<div>
<div class="container w-100 h-100"></div>
</div>
2. Change the height of the container. That will put the footer to the bottom of the page.
So, add this to your CSS code.
.container {
height: auto !important;
}
3. You can delete a few things.
You can delete the class footer_main from your HTML as it's unnecessary.
You can delete this part of your CSS as it's unnecessary:
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
See the snippet below.
#import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#500;700&display=swap');
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName {
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar {
background-color: #414141;
}
.nav-link {
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus {
box-shadow: none !important;
}
.nav-link:hover {
color: lightcoral !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'") !important;
}
button.navbar-toggler {
border: 2px solid #FFA286 !important;
color: rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover {
background-color: rgba(235, 193, 193, 0.52) !important;
}
#media (max-width: 767.98px) {
.nav-item {
background-color: rgb(94, 94, 94);
border: #212529 2px solid;
}
}
/* Navbar End */
/* Body Start */
#headerMenu {
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border: none;
margin-top: 7rem;
}
#bgimg {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box {
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color: white;
cursor: pointer;
}
.box:hover .menuhead {
color: lightcoral;
}
.contentMenu {
text-indent: 1.8rem;
}
/* Add this. */
.container {
height: auto !important;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div>
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4 ">Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Related
I am trying to create a layout with absolute positioning elements something like this:
As you can see, the elements are overlapping and not clearing properly. Perhaps there is a very simple fix but I have been unable to figure out how to resolve this.
.main-block .main-wrapper {
margin-bottom: 4rem;
}
.main-block .main-wrapper:nth-child(odd) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(odd) .main-box .image-container {
width: 440px;
}
.main-block .main-wrapper:nth-child(odd) .main-box .text-container {
background-color: #8EFFFF;
position: absolute;
width: 720px;
top: 3rem;
z-index: -1;
right: 15px;
padding: 4em 5em;
}
.main-block .main-wrapper:nth-child(even) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(even) .main-box .image-container {
width: 440px;
position: absolute;
right: 15px;
}
.main-block .main-wrapper:nth-child(even) .main-box .text-container {
background-color: #8EFFFF;
position: relative;
width: 720px;
z-index: -1;
padding: 4em 5em;
top: 3rem;
}
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="py-5 main-block">
<div class="container">
<div class="row">
<div class="col-lg">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/76b359/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
You don't need absolute positioning here. It can be a real pain for complex layouts. I'd use conventional Bootstrap columns and shift things a bit with negative margins.
.main-block .main-wrapper {
margin-top: 3rem;
}
.main-block .image-container {
width: calc(100% + 2rem);
}
.main-block .main-wrapper:nth-child(odd) .image-container {
margin-left: -2rem;
}
.main-block .image-container img {
margin-top: -2rem;
}
.main-block .main-wrapper .text-container {
background-color: #8EFFFF;
padding: 4rem 5rem;
z-index: -1;
}
.main-block .main-wrapper:nth-child(odd) .text-container {
margin-right: -2rem;
}
.main-block .main-wrapper:nth-child(even) .text-container {
margin-left: -2rem;
}
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="container py-5 main-block">
<div class="row">
<div class="col">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row main-wrapper">
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/6b59b3/fff">
</div>
</div>
<div class="col-8 text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
</div>
<div class="row main-wrapper">
<div class="col-8 text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/76b359/fff">
</div>
</div>
</div>
</section>
</main>
</body>
The footer on my website should be at the end of the page and not sticky. If there is more content that would fit on the screen you have to scroll down to see the footer. If there is less content than would fit on the page the footer should float to the bottom. At the moment only the first works. Does anybody now how to fix it?
My HTML:
<body>
<nav>...</nav>
<div class="container">...</div>
<footer>
<div class="container">
<span>Footer Text</span>
</div>
</footer>
</body>
My CSS:
footer {
background-color: #333333;
color: white;
}
Use flexbox and auto marginref.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
footer {
margin-top: auto;
background-color: #333333;
color: white;
}
<body>
<nav>...</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer>
<div class="container">
<span>Footer Text</span>
</div>
</footer>
</body>
When long text:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
footer {
margin-top: auto;
background-color: #333333;
color: white;
}
<body>
<nav>...</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer>
<div class="container">
<span>Footer Text</span>
</div>
</footer>
</body>
h1{
font-size: 100px;
color: blue;
font-family: 'Mrs Sheppards', cursive;
}
<link href="https://fonts.googleapis.com/css?family=Mrs+Sheppards&display=swap" rel="stylesheet">
<div class="container">
<h1>S U C K I T</h1>
</div>
heck yeah
sry this is my first time posting an answer i was just having fun with the code box
Try the following:
<style>
footer {
position: absolute;
top: (numberofuntits)px;
left: (numberofUnits)px;
}
</style>
See a solution with Bootstrap 4 below:
html,
body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
}
footer span {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="site-wrapper d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus felis id mauris molestie laoreet. Integer sed purus tempor, mollis nisi sit amet, varius nunc. In malesuada mattis placerat. Fusce vel dui at felis semper cursus. Nulla scelerisque,
eros id pellentesque molestie, sem urna fringilla urna, porttitor vehicula nisl augue sit amet dui. Etiam interdum congue venenatis. Ut ac ornare massa. Morbi sed dui posuere, tincidunt est a, eleifend nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Sed tincidunt laoreet odio, et consequat neque lobortis vel. Duis tortor ex, efficitur at efficitur ut, feugiat eleifend ligula. Nullam ultrices vitae tellus a elementum. Nam luctus, ligula ut varius hendrerit, metus quam congue
dui, tempor maximus tortor nulla ac metus. Vestibulum dignissim nisl nec suscipit dictum. Phasellus vehicula eu purus ac dictum. Pellentesque sollicitudin scelerisque ipsum, sit amet tempus turpis condimentum posuere.
</p>
<p>
Nullam est dui, laoreet quis tincidunt quis, iaculis ut purus. Maecenas semper nunc eget tincidunt pellentesque. Phasellus lobortis tellus enim, vitae accumsan ligula tincidunt sit amet. Proin bibendum, leo vel laoreet vestibulum, ante erat pharetra ligula,
mattis rutrum ligula felis non tortor. In hac habitasse platea dictumst. Vestibulum condimentum elit nec libero tempor ultrices. Vivamus velit elit, accumsan vel velit rutrum, laoreet fringilla lectus. Mauris vitae lectus mollis, viverra nulla non,
sollicitudin eros. Nam tincidunt nulla et nulla convallis gravida. Fusce neque turpis, mollis sit amet nisl sit amet, interdum sollicitudin odio. Sed porta purus eget sem mollis, in lobortis lacus venenatis. Duis id tristique orci. Morbi dapibus
a felis et imperdiet. Vestibulum fermentum euismod sem at mattis. Nulla efficitur, est eget sollicitudin malesuada, nulla turpis pellentesque felis, euismod semper libero nibh eu tellus. Integer lacus leo, ultricies quis porttitor luctus, pretium
vel nibh.
</p>
<p>
Suspendisse in lectus lacinia, mattis ligula nec, malesuada arcu. Sed sodales metus odio, eget imperdiet felis pellentesque vitae. Nulla tincidunt, diam et rutrum ultrices, justo felis dictum magna, in lacinia nisl sem eget nunc. Morbi fringilla mauris
venenatis euismod vulputate. Nunc blandit urna et nunc venenatis ultricies. Pellentesque tempor quam eu sodales facilisis. In ornare porta pellentesque. Pellentesque cursus maximus posuere.
</p>
<p>
Curabitur commodo tristique mi congue tincidunt. Pellentesque quis viverra nunc. Aliquam aliquam nec arcu ut scelerisque. Donec mattis lacus in aliquet iaculis. Aliquam eget nunc vitae ligula iaculis euismod at ut justo. Fusce feugiat commodo erat, consectetur
auctor neque vulputate eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper nunc et blandit sagittis. Aenean nibh nunc, eleifend ac vulputate in, sodales quis erat. Vestibulum porta quam
vitae mollis tristique. Proin dolor sem, tempor sit amet facilisis et, sagittis porttitor nisl. Phasellus venenatis cursus lorem, facilisis vestibulum libero cursus id. In sed finibus metus. Aenean convallis massa at turpis lacinia lobortis. Praesent
scelerisque ligula vel magna pharetra, eu condimentum nisl egestas.
</p>
</div>
<footer class="mt-auto bg-dark p-2">
<div class="container text-center">
<span>Footer Text</span>
</div>
</footer>
</div>
Note that it supports variable height of the footer.
Let me know if it suits your needs.
In rendering some HTML document, I would like to mimic the process of handwritten annotations, in which there is a main text, and some annotation put at the same level of an highlighted text in the right margin.
I use CSS grid mechanism to set up the main area (for the main text) and the side area (for annotations).
Some example code illustrating the problem and the sought result is available on jsfiddle. The code is reproduced below.
HTML code:
.kb-container {
display: grid;
grid-template-columns: 4fr 2em 2fr;
grid-template-rows: auto;
grid-template-areas: "main . side";
}
.kb-main {
grid-area: main;
}
.kb-side {
grid-area: side;
}
<body>
<div class="kb-container">
<div class="kb-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. <mark>Donec fermentum</mark>. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
</div>
<div class="kb-side">This is a side note (currently not, lined up with "Donec fermentum").</div>
</div>
</body>
Using CSS grid and flex containers, I am able to head in the right direction and line up the annotation to the marked text. However, the solution is not satisfactory, because it introduces new <div> block elements, thereby breaking the initial text composition (which was using inline elements <mark>).
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 4fr 2em 2fr;
grid-template-areas: "main . side";
}
.grid-main {
grid-area: main;
}
.grid-side {
grid-area: side;
}
.flex-container {
flex-direction: column;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="grid-container">
<div class="grid-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate
vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi.</p>
</div>
</div>
<div class="grid-container">
<div class="grid-main">
<mark>Donec fermentum.</mark>
</div>
<div class="grid-side">This is a side note. It is lined up with the marked text. However, the initial text composition has been broken, due to the introduction of new div tags.
</div>
</div>
<div class="grid-container">
<div class="grid-main">
<p>Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam
arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
</div>
</div>
</div>
</body>
</html>
Here is a solution with additional Javascript code (inspired by the reply to the question Retrieve the position (X,Y) of an HTML element), and not relying only on CSS/HTML.
alignSideNote()
function alignSideNote() {
const markedElement = document.getElementById('mark')
const sideElement = document.getElementById('side')
const markRect = markedElement.getBoundingClientRect()
const sideRect = sideElement.getBoundingClientRect()
const offset = markRect.top - sideRect.top
sideElement.style.marginTop = offset.toString() + 'px'
}
.kb-container {
display: grid;
grid-template-columns: 4fr 2em 2fr;
grid-template-rows: auto;
grid-template-areas: "main . side";
}
.kb-main {
grid-area: main;
text-align: justify;
}
.kb-side {
grid-area: side;
}
<body>
<div class="kb-container">
<div class="kb-main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate
vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. <mark id="mark">Donec fermentum</mark>. Pellentesque malesuada
nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.
Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
</div>
<div class="kb-side" id="side">This is a side note (lined up with "Donec fermentum" using Javascript finally).</div>
</div>
</body>
how can I create this css design?
trying to have no scroll page with white div on a picture to be scrollable
when I use height 100% then sidebar will be displayed OK, but scrollable area will go under the screen, so light gray area is some kind of wraper background and white area is content and I want to add margins with css on it as well
NOTE: would like to avoid media query for this
Here's a solution:
position: absolute can position everything, and then the scrollable area will change size depending on the window size.
* {
box-sizing: border-box;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #ddd;
}
.sidebar {
position: absolute;
top: 100px;
left: 0;
width: 200px;
bottom: 0;
background: #aaa;
}
.main {
position: absolute;
top: 100px;
left: 200px;
bottom: 0;
right: 0;
padding: 20px;
background: #f1f1f1;
}
.scrollable {
padding: 5px;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
.scrollable p {
margin: 0 0 1rem;
}
<div class="wrapper">
<div class="navbar">
Navbar
</div>
<div class="sidebar">
Sidebar
</div>
<div class="main">
<div class="scrollable">
<p>
Scrollable with lots of content inside...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
You can do something like this, Flexbox example:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box;overflow:auto}
html, body {width:100%;height:100%}
#container {
width: 100%;
height: 100%;
display: flex; /* displays children inline */
flex-wrap: wrap; /* enables wrapping */
}
#container > * {
border: 1px solid;
}
nav {
flex: 0 1 100%;
background: #777;
}
aside {
flex: 0 1 200px;
background: #777;
}
.scroll {
flex: 0 1 calc(100% - 250px); /* - 200px of the aside's width - 2 x 25px left & right margin */
margin: 25px;
overflow: auto; /* mandatory */
position: relative; /* mandatory */
}
.content {
width: 2000px;
height: 2000px;
background: #eee;
position: absolute; /* mandatory */
}
<div id="container">
<nav>NAVBAR</nav>
<aside>SIDEBAR</aside>
<div class="scroll">
SCROLLABLE AREA
<p class="content">some pretty big content for testing...</p>
</div>
</div>
The trick lies in the positioning of the content and it's parent, without the positioning, the overflow-y: scroll or overflow-y: auto on the parent doesn't apply.
I don't know if it's looking like what you want to achieve, but here is a quick snippet.
I've put your scrollable area within a container, and I put a max height to that container. Then you just have to add overflow-y: scroll to make it scroll
body {
max-height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 20%;
background-color: #333;
}
.container {
width: 80%;
max-height: 100%;
overflow-y: scroll;
background-color: #eee;
}
.area{
margin: 20px;
background:#fff;
overflow: hidden;
padding: 10px;
}
<body>
<div class="sidebar"></div>
<div class="container">
<div class="area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sagittis lectus, sit amet placerat nisl. Pellentesque blandit porttitor massa vel dignissim. Fusce id velit id libero lacinia tristique. Morbi pretium tempor sapien, id blandit arcu
congue sed. Mauris ultrices tincidunt ipsum, non rhoncus eros consequat vel. Etiam consequat efficitur nibh sed semper. Donec sit amet lobortis diam, et malesuada ligula. Ut a pretium velit, vel porta metus. Proin placerat sollicitudin imperdiet.
Pellentesque dolor nisi, sagittis a diam ut, varius aliquet turpis. Vestibulum pharetra elementum velit, id accumsan felis dignissim sed. Integer tristique faucibus tempor. Aenean varius est eu nisi suscipit interdum. Nam blandit ut nunc ac venenatis.
Donec diam justo, rhoncus in libero ac, tincidunt auctor dolor.
</p>
<p>
Aliquam id orci pharetra, aliquam diam quis, mattis nisi. Maecenas hendrerit eget ex sed consectetur. Praesent at dolor sit amet nisl gravida aliquam. Phasellus maximus fermentum est. Integer sodales tincidunt volutpat. Mauris sit amet lectus non ipsum
tincidunt posuere ut at diam. Nunc in ipsum tincidunt, tempus eros in, viverra diam. Vestibulum convallis odio in arcu consequat congue. Duis egestas ante a orci volutpat, ac commodo est molestie. Aliquam nisl ex, tincidunt in posuere vitae, pretium
rhoncus ligula. Aliquam vehicula turpis sed auctor hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec metus tellus, faucibus et libero in, luctus cursus tortor. Fusce vel magna lorem.
Aenean sodales sollicitudin eros, quis aliquet mi finibus sit amet.
</p>
<p>
Maecenas ut convallis arcu. Morbi sed fringilla libero. Fusce id posuere tellus. Sed imperdiet, justo vel sollicitudin fermentum, mauris ante lacinia ex, vel mollis nisi metus rhoncus ex. Nam et mauris euismod, vehicula tellus vel, aliquet mauris. Aliquam
finibus enim at maximus imperdiet. Suspendisse porta ipsum ac urna fermentum, at pharetra nisl vestibulum. Praesent sollicitudin tristique nibh id eleifend. Proin ut orci sit amet sapien fringilla consectetur sed id sem. Vestibulum et sollicitudin
libero. Curabitur enim neque, euismod vitae felis nec, sagittis cursus sem. Mauris id ornare felis.
</p>
<p>
Aliquam at accumsan magna. Cras eleifend purus quis consectetur posuere. Aliquam nec nunc at tortor sollicitudin interdum. Donec metus tellus, pretium nec ipsum id, sollicitudin pulvinar nisi. Etiam finibus, velit id rhoncus posuere, risus ex auctor nulla,
et placerat orci tellus non dolor. Fusce id sodales est. Aliquam fringilla nibh ut mi auctor eleifend. Phasellus placerat rhoncus ligula ut mollis. Sed a elementum eros, sodales suscipit ante. Sed vitae neque turpis.
</p>
<p>
Etiam sed pulvinar magna, non laoreet magna. Fusce ullamcorper mauris sit amet ligula ullamcorper tempor. Etiam convallis ante sed odio ultrices, id sagittis lorem pretium. Sed ligula odio, volutpat nec vestibulum a, dignissim a leo. Ut ultrices ligula
erat, sit amet cursus odio ornare ac. Etiam molestie ex nisi, et luctus ligula mollis sed. Nullam ac tempus sapien. Aenean varius lacus ac lacinia imperdiet. Sed arcu lorem, facilisis ut ipsum vel, tempor fermentum ex. In scelerisque laoreet arcu,
nec vestibulum turpis. Praesent dolor massa, imperdiet vitae efficitur in, laoreet quis urna. Morbi malesuada orci id ipsum aliquet bibendum. Maecenas commodo ultricies arcu quis venenatis. Nunc tellus quam, feugiat non urna posuere, ornare sollicitudin
nunc. In condimentum, tortor eget ultricies faucibus, ligula urna molestie sem, et suscipit arcu augue vitae magna. Ut pulvinar ipsum eu porttitor elementum.
</p>
<p>
Vivamus laoreet eros sed mollis tempor. Cras rhoncus placerat erat. Morbi vel est sed erat hendrerit hendrerit et ac odio. Aliquam tincidunt lacinia dui sollicitudin gravida. Pellentesque eget consequat mauris. Maecenas at erat nec mauris mollis faucibus.
Sed eget semper eros, vitae iaculis elit. Fusce et interdum elit. Morbi tincidunt felis sed enim congue porta. Proin eget feugiat purus. Praesent placerat convallis nulla, eu convallis risus faucibus molestie. Maecenas non interdum erat. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I am trying to create a page on where i try to let the footer stick at the bottom of the page. It will stick but the problem is that if the browser will be minimized that the footer will go through the content of the page, but actually i want that it stays at the bottom of the page and when the browser is minimized that there will be a scroll bar.
A picture what happens when browser is minimized:
If the browser is big enough then it is ok:
This also happens with the menu:
Can anyone hint me which settings are wrong?
I use this setup:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This is the code:
https://jsfiddle.net/k6ocuw69/1/
Thanks for help
Remove bottom padding from wrapper
Fix those <h2>...</h4>
footerFirstColumn div is taller that your footer, increase footer
height
That's the result https://jsfiddle.net/8odoros/k6ocuw69/5/
you need to use position:fixed
check the fiddle here
EDIT: ok, maybe i understood wrong when you said "fixed". try this and see if this is what you were looking for. you can add text to content and it should still not be overlapped by your footer.
You can accomplish this with the following code:
HTML
<div class="wrapper">
<header class="header">
<h1>Page header</h1>
</header>
<section class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
</section>
<footer class="footer">
Page Footer
</footer>
</div>
CSS
* {
padding: 0;
margin: 0;
}
.wrapper {
background-color: red;
height: 100vh;
}
.header {
background-color: blue;
height: 10vh;
}
.content {
background-color: yellow;
height: 80vh;
overflow-y: scroll;
}
p {
font-size: 200%;
}
.footer {
background-color: green;
height: 10vh;
}
Codepen link
Was this what you were trying to achieve?
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 5rem;
min-height: 100%;
background-color: #f2f2f2;
}
.header {
width: 100%;
padding: 10px 0;
margin-bottom: 20px;
background-color: grey;
text-align: center;
}
.header h3 {
margin: 0;
color: white;
}
.content {
background-color: #ffffff;
margin: 0 auto;
padding: 20px 15px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: grey;
text-align: center;
}
<div class="header">
<h3>This is the header</h3>
</div>
<div class="content">
<h1>Footer example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong> is not fixed</strong>.</div>
Your demo had so much stuff that it was easier for me to do a totally new example from the scratch but this should be easily implemented to any stucture.
Note: You need to set the padding-bottom: 5rem; to body according to your footer height.
Fiddle to play with: https://jsfiddle.net/thepio/rfy0a4Lt/