I came across a minor glitch on firefox. I am trying to position my footer on the bottom of the page. I have found a sticky footer example here: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
I have adapted the solution there to fit my application.
Here is the code:
CSS
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
}
#wrapper {
min-height: 100%;
position: relative;
}
.content-custom {
padding-bottom: 80px;
}
HTML
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
<div class="footer">Footer</div>
</div>
I am including some pages in each section. The trouble I encounter is with the footer. It is working fine in IE and Chrome, but in firefox, the position:absolute is of no use (the footer doesn't stick to the bottom of the page).
I have tried various solutions such as adding the following CSS:
body {
position: relative
}
or using
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
min-height: 80px; /* adding this as a property */
}
but with no success.
Most of the answers I've found provided solutions for users who encountered this problem while using tables, but this is not my case.
Does anyone have an idea of a possible solution ?
Thanks.
So, after adapting the solution provided by Muthukumar, this is the final code that got it working for me:
HTML
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
<div class="footer">Footer</div>
</div>
CSS
.footer {
height: 40px;
position: absolute;
text-align: center;
bottom: 0;
}
.content-custom {
padding-bottom: 40px;
}
html {
position: relative;
min-height: 100%;
}
body {
height:100%;
padding-bottom:40px;
}
Make sure the body and html tags height is 100%, I am also strucked this problem and i found the solution.
<!DOCTYPE html> <!-- Dont forget to add this -->
<html>
<body>
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
*{
padding:0px;
margin:0px;
}
html {
position: relative;
min-height: 100%;
}
body{
height:100%;
padding-bottom:80px;
}
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
width:100%
}
.container{
display:block;
}
try this
.footer {
position:fixed;
bottom: 0px;
height:80px;
}
Try this fiddle
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
}
#content {
padding-bottom:80px;
}
Related
I have an element with absolute position that is being displayed over the vertical scroll, preventing the user from scrolling the page using the scrollbar.
This fiddle explains the problem and what I'm currently doing.
This is the css I'm using to position the div.
.side-content {
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
I was expecting the div to be positioned considering the scrollbar (without manually adding a margin) and not hovering it.
Thanks in advance!
do z-index: -50;
.side-content {
z-index: -50;
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
body {
margin: 0;
text-align: center;
}
.wrapper
{
position:absolute;
width: 100%;
height:100%;
display: flex;
}
.inside_div_one
{
width:10%;
height:100%;
background-color: green;
}
.inside_div
{
width: 25%;
}
.inside_div_two
{
width:80%;
height:100%;
}
.inside_div_three
{
width:10%;
height:100%;
background-color: grey;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="inside_div_one">
<p>sidebar</p>
</div>
<div class="inside_div_two">
<p>FIRST</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>LAST</p>
</div>
<div class="inside_div_three">
<p>jvsdfv</p>
</div>
</div>
</body>
</html>
There are definitely various methods to have a div cover an entire screen with a full screen image in its background, but mostly all of them would adopt min-height:100% and background-size: cover property, what this would do is, if some other section, like footer/header is placed, it generally "floats"above" that full screen div.
Like this
Left image is what presently most solutions do. Right one is what should ideally be good.
One solution is to use vh units.
Any other CSS-only method which can support most browsers?
Thanks.
PS - Pardon me I cant elegantly put this to you.
What is the problem with using 90% instead of 100% min-height? Have a look at my code:
body, html {
height:100%;
padding: 0;
margin: 0;
text-align: center;
color:#FFF
}
.fullsection {
height:90%;
background:red;
}
.b { background:blue; }
.extra { height: 10%; }
footer {
height:10%;
background:black;
position: fixed;
width:100%;
bottom: 0;
}
<div class="fullsection">A</div>
<div class="fullsection b">B</div>
<div class="extra"></div>
<footer>footer</footer>
Each fullscreen section is 90% of page height and the footer is fixed at the bottom with 10% height. I have also added an empty "extra" div for the footer to rest at when you reach the bottom of page.
display: flex
#viewport {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
flex: 1;
background: #ddd;
}
.footer {
flex-basis: 10%;
background: #f00;
}
<div id="viewport">
<div class="content">
</div>
<div class="footer">
</div>
</div>
height: 90%/10%
#viewport {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
height: 90%;
background: #ddd;
}
.footer {
height: 10%;
background: #f00;
}
<div id="viewport">
<div class="content">
</div>
<div class="footer">
</div>
</div>
I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.
design im looking to get:
design
source (html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
source (css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div
the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.
the .js file is currently still empty so i didnt post any source of it.
Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!
edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.
jsfiddle: http://jsfiddle.net/zt1Lyaop/
I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better
http://jsfiddle.net/7k9vhk4r/2/
The key is using fixed and relative positioning, together with creating offsets based on percentages.
I just changed this:
added margin:0 to body
Change .main rules to :
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/
See the demo FULL PAGE
body {
background-image: url("background.jpg");
margin:0;
}
div {
margin: 0px;
}
.menu {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
right: 0;
text-align: center;
position: fixed;
}
.contact {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position: fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
}
.main {
background-color: green;
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px;
/*left: ;*/
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
I'm trying to assign overflow:hidden to the wrapper but it is ignored. It works however, if I assign it to body. Does anyone have an idea how to make it work for the wrapper?
The HTML...
<head>
<meta charset="utf-8">
<title>Overflow Test</title>
</head>
<body>
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</body>
</html>
The CSS...
html {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}
#wrapper {
overflow: hidden;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}
Help would me much appreciated...
Thanks
Typo, change <div id="#wrapper"> to <div id="wrapper">
Update: I change the #content height to 100px, and created this fiddle to test if it works, and it seems it does. You must have removed much of your code in the example you provided, perhaps something else is causing the problem? Or is it the #content height 3000px that is the problem?
Update2: I think you want to activate/deactivate scrolling on body based on the status of your menu. I created this little fiddle with jQuery to show you how you can toggle a class on body. Just tie the listener to your menubutton instead of the whole wrapper element like I did, and watch the class .overflow getting added/removed to body. I hope this was the answer you where looking for?
Ok, I got it to work by putting my wrapper inside another div with position:absolute and top and bottom set to 0. I took inspiration from this thread http://goo.gl/U3OQQV
Here's the new fiddle... https://jsfiddle.net/aaandreas/esLcw3md/2/ Thanks for your effort turbopipp, I appreciate it!
Here's the updated HTML...
<body>
<div id="prewrapper">
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</div>
And the updated CSS...
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#prewrapper {
position: absolute;
width: 100%;
overflow: hidden;
top: 0;
bottom: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}
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.