I want to create a layout like this-
Footer is sticky.
Below is the code I tried:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
.page-wrap {
min-height: 100%;
margin-bottom: -45px;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
}
#footerwrapper {
height: 45px;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container"></div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer"></div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper"></div>
</footer>
</body>
I am giving height: 100% to .adminpanelContainer and its ancestors also but there is no effect on it.
I want the white area to expand across the whole web page irrespective of their height.
What changes I have to make to extend the div till bottom.
This will work for you:
I have just added ↓
#body .container{
height: calc(100vh - (90px + 45px));
}
the calculation is as follows:
height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));
If you want to learn more about calc and vh, please click on them.
A working Sample from your snippet:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
.page-wrap {
min-height: 100%;
margin-bottom: -45px;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
}
#footerwrapper {
height: 45px;
}
#body .container{
height: calc(100vh - (90px + 45px));
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
</div>
</header>
<div id="body">
<div class="container" >
<div class="panelContainer">
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
</div>
</footer>
</body>
Hope this was helpful for you.
Without adjusting any existing markup the intended behaviour can be achieved by declaring <percentage> height unit values for applicable nested elements as well.
Start by declaring a relative height (with percentage unit values)
for the element #body - account for the combined height of the
nested header & footer elements, e.g:
#body {
/* 100% height minus the sum of header & footer height */
height: calc(100% - 125px);
}
Next, declare height: 100% for any further nested elements that
are required to occupy the full available height of the viewport,
e.g:
.panelContainer {
height: 100%;
}
The code snippets below demonstrate this behaviour with both fixed and relative footer elements.
Fixed Footer:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.page-wrap { /* adjusted */
height: 100%;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
/* additional */
position: fixed;
bottom: 0;
}
#footerwrapper {
height: 45px;
}
/* Additional */
* {
box-sizing: border-box;
}
#body {
height: calc(100% - 125px); /* 100% height minus the sum of header & footer height */
}
.panelContainer {
height: 100%;
/* following styles added just for the sake of demonstration */
background: white;
border: 1px solid #d6d6d6;
box-sizing: border-box;
max-width: 80%;
margin: auto;
}
.panelContainer .inner {
position: relative;
height: 100%;
}
.panelContainer .inner span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 20px;
margin: auto;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
<span>height: 80px</span>
</div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer">
<div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
<div class="container">
<span>height: 45px</span>
</div>
</div>
</footer>
</body>
Relative Footer:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.page-wrap { /* adjusted */
height: 100%;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
/* additional */
position: relative;
bottom: 0;
}
#footerwrapper {
height: 45px;
}
/* Additional */
* {
box-sizing: border-box;
}
body {
padding-bottom: 45px;
}
#body {
height: calc(100% - 80px); /* 100% height minus the height of the header */
}
.panelContainer {
height: 100%;
/* following styles added just for the sake of demonstration */
background: white;
border: 1px solid #d6d6d6;
box-sizing: border-box;
max-width: 80%;
margin: auto;
}
.panelContainer .inner {
position: relative;
height: 100%;
}
.panelContainer .inner span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 20px;
margin: auto;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
<span>height: 80px</span>
</div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer">
<div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
<div class="container">
<span>height: 45px</span>
</div>
</div>
</footer>
</body>
Practical Interactive CodePen Demonstrations:
Here you can observe practical demonstrations, for fixed and relative footers, which allow content to be added or removed dynamically. In addition, these demonstrations also account for dynamic footer heights.
Keeping a Fixed Footer at the bottom of page (Dynamic Footer Height)
Keeping a Relative Footer at the bottom of page (Dynamic Footer
Height)
Related
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
I had a very nice idea to make my project much prettier.
I want that the footer is standard like in the picture below:
And when i scroll further down now, that the footer goes up and bellow it is all the stuff like the "Impressum" and "Contact".
I searched the Internet for various solutions but couldn't find something fitting.
I hope you can help me.
Code of my footer:
HTML:
<footer>
<div class="footer">
<p class="footer-text">OneClick</p>
</div>
</footer>
CSS:
.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
$(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.footerContent').slideDown(650);
} else if ($(document).scrollTop() < 100) {
$('.footerContent').fadeOut(500);
}
});
})
body,
html {
height: 1000px;
}
.footer {
position: fixed;
z-index: 99;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footerContent {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background: #F28724;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<p class="footer-text">OneClick
</p>
</div>
<div class="footerContent">
<p>Contact ...
<p>
</div>
You could try this solution that uses the calc function of CSS (read more: http://www.w3schools.com/cssref/func_calc.asp), however, this is reported not supporting the IE8, I believe Chrome will run it well
HTML:
<header>
<h1>Header</h1>
</header>
<main>
<content>
<p>content</p>
</content>
<footer>
<p>Footer</p>
</footer>
</main>
CSS:
html,
body {
margin:0;
padding:0;
min-height:100vh;
}
header {
background: LightSlateGray;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header h1 { margin: 0; }
main { height: auto; min-height: calc(100vh - 100px); }
content, footer { display: inline-block; width: 100%; }
content { height: auto; min-height: calc(100vh - 200px); background:lightblue; }
footer {
height:100px; /* Height of the footer */
background:#6cf;
}
Demo: https://jsfiddle.net/89ucrec5/4/
assign absolute position to footer and bottom:0;
I have three divs (left, mid and right) and these divs don't have an exact height, because it depends on how many rows text are inside the div.
Now I want vertical lines (which seperate the three divs) through the whole height of the users monitor, no matter how high the divs are.
How can I do this? Because , as you can see in the css-code, border-right/border-left don't work for me.
Intention
HTML
<div class="content">
<div class="content_left"></div>
<div class="content_mid"></div>
<div class="content_right"></div>
</div>
CSS
.content {
line-height: 1.1;
background-color: #FFF;
color: #000;
position: absolute;
top: 36px; /* because there is a top-menu which is 36px high */
left: 70px; /* because there is a side-menu which is 70px wide */
right: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
}
.content_left {
position: absolute;
width: 22.5%;
left: 0px;
top: 0px;
border-right: 1px solid #ccc;
padding: 10px;
overflow-x: hidden;
overflow-y:hidden;
}
.content_mid {
position: relative;
width: 50%;
top: 10px;
left: 25%;
float: left;
padding-left: 10px;
}
.content_right {
position: absolute;
width: 22.5%;
right: 0px;
top: 0px;
border-left: 1px solid #ccc;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
Edit 1: I would like to have these seperate-lines 1px wide and I cannot set the height of content_left, content_mid, content_right to 100% because I have resizeable boxes in these divs.
I think this does what you want.
JSFiddle example
The HTML structure is a bit more complicated than yours:
<div class="menu-top">Menu top</div>
<div class="wrapper">
<div class="menu-left">Menu left</div>
<div class="content">
<div class="column">
<div class="column-content">
<h1>Column 1</h1>
</div>
</div>
<div class="column">
<div class="column-content">
<h1>Column 2</h1>
</div>
</div>
<div class="column">
<div class="column-content">
<h1>Column 3</h1>
</div>
</div>
</div>
</div>
And here's the CSS:
body {
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.menu-top {
width: 100%;
height: 36px;
background-color: #3498DB;
}
.wrapper {
display: flex;
}
.menu-left {
height: calc(100vh - 36px);
width: 70px;
background-color: #59ABE3;
}
.content {
width: calc(100vw - 70px);
height: calc(100vh - 36px);
background-color: #E4F1FE;
display: flex;
}
.column {
flex: 33;
border-left: 1px solid hotpink;
}
.column:first-of-type {
border-left: none;
}
You can actually fake it using background-color for the parent.
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.parent {background-color: #f99; height: 100%; overflow: hidden; position: relative;}
.parent .col {float: left; background-color: #fff; height: 100%; margin: 0.5%; width: 32.25%; position: relative;}
<div class="parent">
<div class="col">
<p>I am one line!</p>
</div>
<div class="col">
<p>I am three lines!</p>
<p>I am three lines!</p>
<p>I am three lines!</p>
</div>
<div class="col">
<p>I am two lines!</p>
<p>I am two lines!</p>
</div>
</div>
Fiddle: http://output.jsbin.com/hefefawilu/1
Just Created a fiddle using your code.
See and let me know if this solves your issue.
http://jsfiddle.net/knxd0htm/
Add this part of code to make it work
**HTML:**
<div class="content">
<div class="content_left">a</div>
<div class="full-height one"></div>
<div class="content_mid">b</div>
<div class="full-height two"></div>
<div class="content_right">c</div>
</div>
**CSS**
/**** CODE ****/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.content {
height: calc(100%-36px);
min-height: calc(100%-36px);
}
.full-height {
position: absolute;
height: 100%;
border-left: 1px solid red;
}
.full-height.one {
left: 22.5%;
}
.full-height.two {
right: 22.5%;
}
/**** CODE ****/
You can achieve this without adding an extra HTML by using Pseudo selectors. I've also tidied up some of the code that works out widths :).
* {
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
}
body {
position:relative;
margin:0;
padding:0;
}
.content {
line-height: 1.1;
background-color: #FFF;
color: #000;
position: absolute;
top: 36px;
/* because there is a top-menu which is 36px high */
left: 70px;
/* because there is a side-menu which is 70px wide */
right: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
}
.content_left {
position: absolute;
width: calc(25% - 35px);
left: 0px;
top: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
.content_mid {
position: relative;
width: 50%;
top: 10px;
left: 25%;
float: left;
padding-left: 10px;
}
.content_right {
position: absolute;
width: calc(25% - 35px);
right: 0px;
top: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
.content:before {
content: '';
border-left:1px solid #ccc;
width:0;
position:absolute;
top:0;
left:25%;
bottom:0;
}
.content:after {
content: '';
border-right:1px solid #ccc;
width:0;
position:absolute;
top:0;
right:25%;
bottom:0;
}
<div class="content">
<div class="content_left"></div>
<div class="content_mid"></div>
<div class="content_right"></div>
</div>
So I have this fixed header which has z-index:10, below that a fixed banner and then below that a relative content container. What I want is that the content scrolls over the banner but under the header. However, when I try to scroll it doesn't work. The strange part to me is that whenever I add box-shadow: 0px 0px 2px rgb(100,100,125); to the content container it does do what I want. I'm using the following code:
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: 300px;
}
#content_container {
background: rgb(243,247,248);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 0px 2px rgb(100,100,125);
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
/* Header styling, not relevant */
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" src="img/desygn%20logo%20website.png">
</div>
<div class="menuItem">Home</div>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button">
</div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" src="img/banner_website.png">
</div>
<div id="content_container">
</div>
</div>
In your code you've not added any content under content_container. I don't see any issue with your code. It is working fine. Check here with content