I created a sticky footer, and it appears to be staying at the bottom of the page. The only problem is that when I minimize my browser by dragging the bottom of the browser up, the content above overlaps with the footer. The Content div contains images which are on top of the footer when I minimize. Also the type within the footer appears above the images (when minimized). Any help would be appreciated. Thank you.
<----- HTML Structure ---->
<div class="supercontainer"
<div class="nav"></div>
<div class="wrapper">
<div class="content"></div>
<div class="push"></div>
</div>
</div>
<div class="footer"></div>
<----- Relevant CSS ----->
.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
position: relative;
}
.footer {
background-color: black;
width: 100%;
height: 100px;
}
.push {
height: 100px;
}
To get the content to push down the footer, you need to give the content div a negative bottom margin that matches the footer's height.
.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
position: relative;
}
.footer {
background-color: black;
width: 100%;
height: 100px;
}
http://css-tricks.com/snippets/css/sticky-footer/
Related
I am trying to keep an element from scrolling past left: 0 using position: sticky. This works fine in some cases, but I have noticed that if the element width increases it stops working. For example, the following works:
#header {
position: sticky;
left: 0;
width: 50%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
But if I increase the witdth of header element to 100% it stops working.
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
Why does this happen? And is there any way to use position: sticky to prevent the header element from scrolling when it's width is 100%? I prefer not to use position: fixed in this case.
I now understand what is happening. The issue is the different way the browser treats the width and height of a <div>. The default values of auto mean that the width of the <div> is 100% while the height is set by the content. If the content is wider than 100%, then on horizontal scroll the sticky element hits the end of the container <div> and, since it cannot leave the confines of the container, begins to scroll. This doesn't happen in the same situation for vertical scrolling since the container <div> is as tall as the content by default.
To prevent this happening, we have to ensure that the container <div> is as wide as its content. This can be done in most browsers (not Edge or Explorer) by including width: max-content in the container style. Alternatively, as proposed in mfluehr's answer, putting overflow: auto creates a new block formatting context that is as wide as the content. Another option is to use display: inline-block or inline-flex etc. to cause the container <div> to base its width on the content.
For example, using two of these techniques, you can create headers, sidebars and footers that stick for a page that can scroll vertically and horizontally:
body {
padding: 0;
margin: 0;
}
#app {
overflow: auto;
height: 100vh;
}
#header {
background: blue;
width: 100%;
height: 40px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
color: white;
}
#sidebar {
position: sticky;
background: green;
width: 200px;
height: calc(100vh - 40px);
top: 40px;
left: 0;
color: white;
flex-grow: 0;
flex-shrink: 0;
}
#container {
display: inline-flex;
}
#content {
background: #555;
height: 200vh;
width: 200vw;
background: linear-gradient(135deg, #cc2, #a37);
flex-grow: 0;
flex-shrink: 0;
}
#footer {
background: #000;
height: 100px;
z-index: 100;
left: 0;
position: sticky;
color: white;
}
<div id="app">
<div id="header" ref="header">
Header content
</div>
<div id="container">
<div id="sidebar" ref="sidebar">
Sidebar content
</div>
<div id="content" ref="content">
Page content
</div>
</div>
<div id="footer" ref="footer">
Footer content
</div>
</div>
This is an interesting problem. I don't know why, but putting overflow: auto on the container around the <div>s seems to fix the issue.
You can add height: 100vh to the container to let the content inside overflow with scrollbars.
body {
margin: 0;
}
#container {
overflow: auto;
height: 100vh;
}
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 200vh;
width: 120vw;
background: linear-gradient(135deg, #cc2, #a37);
}
<body>
<div id="container">
<div id="header">
This is the header.
</div>
<div id="page">
Page content goes here.
</div>
</div>
</body>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
Here is the JS fiddle I made: http://jsfiddle.net/K6CFU/
The structure is the exact same I'm using for my website but the problem is that I'm not getting the middle section of my site to be 100% high. Right now it's the content that determines how tall it is.
<body>
<div id="page-container">
<header></header>
<div id="page-wrapper">
<div id="page-content">
</div>
</div>
<footer></footer>
</div>
</body>
html, body { height: 100%; padding: 0; margin: 0; }
header { width: 100%; height: 50px; background-color: red; }
footer { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: green; }
#page-wrapper { width: 1024px; margin: 0px auto; background-color: yellow; }
#page-content { height: 100%; background-color: pink; }
Not 100% sure I know what you mean but have you tried adding height:100% to the page-wrapper div?
#page-wrapper{
height:100%;
width: 1024px;
margin: 0px auto;
background-color: yellow;
}
I've ran into this problem in the past. The way that I see it is that when you specify height: 100%;, it fills to 100% of the div (or whatever element) - but not to the screen size. I've always had to use min-height somewhere to get similar results that you're seeking.
For the body or probably for your page-wrapper div, try specifying min-height: 500px; (or whatever you feel is an appropriate size.
Make the page-container
height: 100%;
so that the object inside know the size of the box.
than you can make the page-wrapper
position: absolute;
bottom: 50px;
top: 50px;
height: auto; /*can also be left away*/
now the middle part will be between the footer and the header
http://jsfiddle.net/K6CFU/5/
you can make the page-content
height: 100%;
or you can leave it away, like you want.
I have a wide image I want to use as a fixed footer. The main page is 960px and centered, and the footer is 1620px. If the browser window is greater than 960px wide, then it shows more and more of the footer image without displaying scroll bars.
How can I achieve this? So far I have this, but it's wrong:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
div#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -340px;
text-align: center;
}
div#body-container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.footer, .push {
width: 1620px;
height: 340px;
}
HTML
<div id="wrapper">
<div id="body-container"> <!-- width: 960px -->
<!-- content -->
</div>
<!-- fixed footer -->
<div class="push"></div>
<div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px -->
</div>
.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}
You can solve this by updating the width of your footer to 100% and adding the property overflow: hidden which will remove the scrollbars if the content inside (the image) is larger than the width of the footer.
It gets a little more complicated however if what you're trying to do is also center the image. For this you'll need to add relative positioning to the .footer and absolute positioning to the img. You'll also need to add left: 50% and margin-left: -810px (half of your image width) to the img.
Here is the final updated portions of the code:
.footer, .push {
width: 100%; /* changed from 1620px;*/
height: 340px;
overflow: hidden;
position: relative;
}
.footer img {
width: 1620px;
height: 340px;
left: 50%;
margin-left: -810px;
position: absolute;
}
And here is a jsfiddle to demonstrate: http://jsfiddle.net/uf8Lh/
Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?