Related
I would like to add a newspaper look to an HTML page to print a PDF report based on it. One issue I ran into is that I have difficulties to automatically break a text to a "new page" (that is another div (?)) when I set a defined height to the text container .newspaper. My current code uses the CSS Multi-column Layout. Here, even though I set the property column-count: 3 it adds a fourth column when it exceeds the available space.
What I would need is that the remaining text that cannot go into the third column continues in the first column again, but under the current text. Is this possible in a HTML setup?
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
height: 525px;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
Yes, you do. Wrap a .newspaper div into .main div and add specific height into that.
.main {
height: 525px;
overflow:auto;
padding: 10px;
}
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="main">
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
As an alternative, you may set a column-width to keep it easily readable and use mediaqueries to help it being responsive. It will span your content from 1 to X columns depending on the width avalaible of your media screen.
here an example to play with: ( or to fork https://codepen.io/gc-nomade/pen/ZExPJWZ )
note mediaqueries are used only because of your spanning element , column-width used on its own do not require mediaquerie to be responsive. To see behavior, run the snippet in fullpage mode, then resize your browser's window.
* {
box-sizing: border-box;
}
html {
--colSize: 15em;
--colGap: 40px;
--colbound: calc(100vw - (var(--colGap) + var(--colSize) * 2));
}
.newspaper {
column-width: var(--colSize);
column-gap: var(--colGap);
position: relative;
padding-top: 100px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
width: var(--colbound);
left: calc(var(--colSize) + var(--colGap));
min-width: var(--colSize);
height: 100px;
white-space: nowrap;
margin: auto;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -100px;
}
#media screen and (max-width: calc( 30em + 40px + 2em)) {
.newspaper div {
position: static;
width: 100%;
}
.newspaper p:first-of-type {
margin-top: 0;
}
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><br><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1">
<rect width="100%" height="50" fill="blue"></rect>
</svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
i got following HTML structure:
Demo here
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>Content</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
#wrapper{
margin: 0;
height: 100vh;
max-height: 100vh;
/* overflow: hidden; */
display: flex;
flex-direction: column;
}
#header{
background: blue;
height: 3rem;
}
#content{
background: red;
flex-grow: 1;
}
#footer{
background: green;
height: 3rem;
}
My problem is that when the div of the content gets too large, the wrapper ignores his max-height and gets a scrollbar. What i want is that the content div instead gets the scrollbar and the wrapper holds it's height.
Demo of content to large
You have to make the wrapper overflow: hidden so scroll-bar is disabled for that div.
Next, You can add the overflow: auto to content to make it scrollable if content goes outside.
#wrapper{
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: red;
overflow: hidden;
}
#content{
flex-grow: 1;
overflow: auto;
}
You don't need a flexbox here, since all the elements go after each other.
In your example, you can use a max-height on the content itself, and use a overflow: scroll to prevent large text to not show up
wrapper {
margin: 0;
height: 100vh;
/* overflow: hidden; */
}
#header {
background: blue;
height: 3rem;
}
#content {
background: red;
height: calc(100vh - 6em);
overflow: scroll;
}
#footer {
background: green;
height: 3rem;
}
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>iquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velmperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, cos autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign
s autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
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>
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.
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/