how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
Related
I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here
I have a problem because in my code i have an header with padding(left & right at 8%), but on the content box i dont have padding, and when i reduce the firefox window the content box have not the same width than the header (because padding on the header change this).
So I want to the box content have always the same width than the header, and keep dimensions of the slidebar.
in the content right of the slide bar, I have tried to put the same padding but that does not change because the contentbox have a defined width.
This is a code example:
<header>
<div id="logo"></div>
</header>
<div id="box">
<div id="slidebar"></div>
<div id="content"></div>
</div>
thats the JSFIDDLE :
https://jsfiddle.net/t2h839dt/
(if you reduce the preview window on JSFIDDLE, you see the problem (not same width for header and box content).
Your code seems partially responsive. First of all you should decide which approach you are going to do? either fixed or responsive layout.
Please try the below link is for fixed layout.
[jsfiddle][1]
[1]: https://jsfiddle.net/antonysuthakarj/hLsaotco/
I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.
<div id="footer">
</div>
<div id="content">
</div>
Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/
Problem: Content DIV (with its text) goes over footer.
Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.
Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.
Here is an image telling what I want to achieve:
I will give more info if asked.
Thanks a lot.
I updated the jsfiddle:
http://jsfiddle.net/MXMWe/4/
A few things:
I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) - This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
I removed the opacity that was on the footer because if you have the opacity it effects the entire div - AKA the text from the content div would be visible behind it since it's transparent.
I added a z-index: 2 to the #footer to ensure it is above the #content at all times.
If you're going to have an opacity/transparency as the background of the footer you will see anything it's above, behind it.
Have you tried using the CSS Sticky Footer?