I got my footer to touch the bottom of the page all time by using the following css
footer {
width: 100%;
bottom: 0;
position: fixed;
}
Now I want to know how to make the section and aside touch the top of the footer at all times. I am using the following as style directives for the section and aside.
section {
float: left;
background-color : red;
width : 80%;
}
aside{
width : 20%;
float : left;
background-color : green;
}
If I give height some particular pixel value it will not render correctly in some other screen size.
What should I use in addition so the height is responsive and covers the area from header to footer all the time in all the various sizes of screen, wherever the page is going to be rendered? Any hint which will help me come out of this will be highly appreciated.
These are based upon the Aside being 20% width and the Footer being 20% height. You can adjust accordingly. For the scrolling one, just remove the height attributes to allow it to be dynamic, but I would put a min-height:80%; on them just in case :). You don't need any of these silly wrappers ;).
Non-Scrolling
position:fixed; all elements and lay them out using top, left, right and bottom percentages to suit.
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
footer {
width: 100%;
bottom: 0;
position: fixed;
top:80%;
background-color:orange;
}
section {
position: fixed;
top:0;
left:20%;
right:0;
bottom:20%;
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
aside {
position: fixed;
top:0;
left:0;
right:80%;
bottom:20%;
background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
}
<aside></aside>
<section></section>
<footer></footer>
Scrolling
Add padding-bottom to the aside and section of the same value as the height of the footer.
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
footer {
width: 100%;
bottom: 0;
position: fixed;
top:80%;
background-color:orange;
}
section {
float: left;
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
width : 80%;
height:100%;
padding-bottom:20%;
}
aside {
width : 20%;
float : left;
height:100%;
background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
padding-bottom:20%;
}
<aside></aside>
<section></section>
<footer></footer>
i would suggest that you use a wrapper for your whole footer.
like this:
//this is the fixed block
.wrapper {
position: fixed;
display: block;
width: 100%;
bottom: 0;
left: 0;
}
.aside {
position: relative;
width: 80%;
height: 100px;
background: yellow;
display: inline-block;
}
.section {
position: relative;
width: 19%;
display: inline-block;
height: 200px;
background: blue;
}
.footer {
position: relative;
width: 100%;
display: inline-block;
height: 200px;
background: black;
}
<div class="wrapper">
<div class="aside"></div>
<div class="section"></div>
<div class="footer"></div>
</div>
Related
body{
max-width:1366px;
}
.gotop{
position:fixed;
right:9px;
bottom:7px;
cursor:pointer;
width:25px;
}
gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.
Problem is on monitors greater than 1366 px. The button is far right from the body.
How to keep it fixed, but inside body?
One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:
.container {
position: relative;
max-width: 800px;
height: 200vh; /* for scrolling demo */
margin: 0 auto;
border: 1px solid black;
}
.button-wrapper {
position: absolute;
right: 35px; /* button width plus margin */
top: 30%; /* or whatever you need */
}
.button {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
background: black;
}
<div class="container">
<div class="button-wrapper">
<div class="button"></div>
</div>
</div>
Try This
body{
max-width:1366px;
background:#f1f1f1;
}
.gotop{
position:absolute;
right:25px;
bottom:25px;
cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>
I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.
Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.
.wrapper{
position: relative;
height:200vh;
width: 100%;
max-width:400px;
background: #000;
}
.holder{
position: absolute;
top:92.5%;
right:0;
background: #ccc;
}
.button{
height:30px;
width: 70px;
position: fixed;
margin-left:-70px; /* minus width */
bottom:10%;
}
<div class="wrapper">
<div class="holder">
<button class="button">Test</button>
</div>
</div>
What you asking is rather an old way of doing things but it can be achieved.
Set the width of body.
Set fixed element to center.
Offset center by width of body and fixed element.
html,
body {
position:relative;
height: 100%;
max-width: 200px;
margin: 0 auto;
border:1px solid #111;
}
.gotop {
position: fixed;
left:50%;
bottom: 7px;
cursor: pointer;
width:40px;
background:#eee;
margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>
I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
I have a fixed header and footer with a height of 50px. However, when I scroll the page, the page content overlaps the fixed header and footer. How can I hide the page as it scrolls into the header and footer (the top 50px)?
This can only be done in HTML/CSS. If it takes JS or JQ to perform this, then I will forget about doing this.
CSS
header {
height: 50px;
position: fixed;
}
.page {
position: relative;
}
.sidebar {
float: left;
position: fixed;
width: 220px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
height: 50px;
}
HTML
<header>
This content should stay on top.
</header>
<div class="page">
<div class="sidebar">This content should not move when using scroll bars.</div>
<div class="main"></div>
</div>
<footer>
This content should stay on bottom.
</footer>
Try adding a value to your footer for example
bottom: 0;
Check this fiddle: http://jsfiddle.net/d7T83/
EDIT
Or you can specify a height for your page element
.page {
position: relative;
display:block;
height: 50px;
}
Demo
css
body, html {
height: 100%;
margin:0;
padding:0;
}
header {
top:0;
height: 50px;
position: fixed;
left:0;
right:0;
background: #ccc;
z-index:2;
}
.page {
position: relative;
background: #eee;
z-index:1;
height: 100%;
}
.sidebar {
left:0;
position: fixed;
width: 220px;
top:50px;
bottom: 50px;
background: #ddd;
height: calc(100% - 100px);
}
.main {
float: right;
width: calc(100% - 220px);
height: 100%;
background: red;
margin:50px 0;
}
footer {
position: fixed;
height: 50px;
bottom:0;
left:0;
right:0;
background: #aaa;
z-index:2;
}
I think what you are looking for would be this -
header {
top: 0;
height: 50px;
position: fixed;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
.page {
position: relative;
}
.sidebar {
top: 50px;
float: left;
position: fixed;
width: 220px;
}
.main {
margin-top: 50px;
float: right;
left: 220px;
width: 740px;
z-index:1; /* z-index lesser than header and footer */
}
footer {
position: fixed;
height: 50px;
bottom: 0;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
See example here - http://jsfiddle.net/7V57P/5/
For the header, just give a margin top to the page content. For the footer and header Give them a z-index that is higher than the page div to ensure that it overlaps the content.
header {
height: 50px;
position:fixed;
top:0px;
left:0px;
z-index:4;
background-color:orange;
}
.page {
margin-top:40px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
bottom: 0px;
height: 50px;
background-color:orange;
z-index:4;
}
DEMO FIDDLE
I wanted to make a 15% height header and footer, and for the rest height should be main (with image). But unfortunately, the image is going too big and I don't know how to resize it to 100% width (of #all div) and 70% (of #all div).
Would appreciate any help.
The image as how it looks now.
html,
body {
margin:0;
padding:0;
height:100%;
width: 100%;
}
#all {
position:relative;
width: 60%;
height:100%;
margin: auto;
}
header#main-header{
display: block;
position: absolute;
background:#ff0;
height: 15%;
width: 100%;
z-index: 10;
}
#main {
display: block;
position: absolute;
top: 15%;
height: 30%;
}
footer{
display: block;
position:absolute;
bottom:0;
width:100%;
height:15%; /* Height of the footer */
background:#6cf;
z-index: 10;
}
try to use #main img {display:block; width:100% }
Also, I recommend you to use class instead id.
am making a website, and have a wrapper on the footer, i want the footer as sticky footer, but when i minimise the screen and make it smaller the footer overtakes the content and header.
#footerWrapper {
height: 177px;
bottom: 0;
position: absolute;
width: 100%;
}
This does what i want as it makes the footer go to the bottom of the page regardless of what size the screen is. however when i minimise the screen and move it up it stays absolute hence staying in that 1 page.
as i would want it to stay on the page rather than the footer being absolute.
any ideas.
I'm using this, and it works fine, on mobiles too ...
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
source:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
demo:
http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.
#headWrapper {
padding-bottom: 0px;
position: relative;
}
#headWrapper {
z-index: 2;
height: 160px;
/* width: 960px; */
margin: 0 auto;
background: url(/images/PageImages/homeHeadBack.png) repeat-x;
}
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: absolute;
width: 100%;
bottom: 0;
z-index: 1;
}
Please note that #headWrapper needs to specify position:relative.
I think you may start from this. Worked on Chrome.
Try this
#footerWrapper{
position: fixed;
}
#contentWrapper{
margin-bottom: 177px; // height of the footer
}
Alright, I'm not positive but I think I understand what you're trying to accomplish
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: fixed;
width: 100%;
bottom: 0px;
}
#contentWrapper {
background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
min-height: 208px;
margin-bottom: 177px;
}
If that doesn't fix it than I don't understand what you're aiming for.
try this one.
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
for more information.