Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))
I need simple header->content->footer page, like this
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.
What I've tried
header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.
Jsfiddle example:
https://jsfiddle.net/xwjhn7ej/
You are so close ... just need to change the value from height , what you need is to set the min-height :
.container {
min-height: 100%;
Updated Fiddle
Bonus:
To keep the content all visible you can use padding on the container = to the height of your footer and header:
.container {
min-height: 100%;
background:red;
width:1280px;
margin:0 auto;
position: relative;
/*Use box-sizing to include the values of the padding on the 100% min-height*/
box-sizing:border-box;
/*Padding for bottom and top = to the height of your elements footer-header*/
padding: 135px 0;
}
2nd Demo Fiddle
.container {
min-height: 100%;
}
.content {
padding-top: 135px; // height of the header
padding-bottom: 135px; // height of the footer
}
JSFiddle
Based on your fiddle you can could try the following:
.container {
/* height: 100%; - remove this*/
min-height: 100vh;
...
}
Then add appropriate padding to the top and bottom of the content depending on the height of your header and footer.
Related
When the user goes at the end of the page with the scrool, there he can see the footer. the footer must appear only at the end of bottom when the user go at the end. My code work when there are a lot of components in the page, so the footer does what I want. The problem is when the page has a little component the footer appears in this way:
My CSS are :
html{
min-height: 100% !important
position: relative !important
}
#footer{
background-color: #30373d
width: 100%
position: relative
height: auto
}
<div id="footer"></div>
Anyone can help m
Just add a wrapper around your content and give it a min-height:100vh; (or whatever height suits your actual layout) property like below.
If you want the footer to always appear at the bottom of the page, set it to positon:absolute;
body {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
}
footer {
min-height: 100px;
width: 100%;
background: black;
}
<div id='wrapper'>
very little content
</div>
<footer></footer>
Instead of working on the footer, work on the content. Given that your footer has a fixed dimension you can ensure the body content will always take at least the portion of the empty screen minus the footer size. For example you could specify your content min-height like this:
.content {
min-height: calc(100vh - footerDimension)
}
I would like to create a layout for a webpage with the following conditions :
A header div that sticks to the top of the browser of a defined height.
A footer div that sticks to the bottom of the browser of a defined height.
A main div that fills all the space between the header and the footer.
The 3 parts shall not overlap when the height of the browser is reduced to lesser than the height of the footer and the header and the content of the main div.
If the height of the browser is reduced to lesser than that, scrollbars should appear for the whole document, not just for the main content.
In other words and with numerical values :
Let's assume the header and the footer are 100 px each and the browser height which is of course variable is 800 px; I want the main div which, lets suppose, has a content that takes only 200px to occupy the whole remaining 600px.
When the browser is reduced to a height lesser than 100px (header) + 100px (footer) + 200px (content of main div) = 400px; I don't want the three parts to overlap and I wand scrollbars to appear for the whole document not just the main content.
Is this achievable with only HTML and CSS and without using flexboxes nor javascript ?
Here is the sample code (snippet) :
* {
margin: 0;
padding: 0;
}
body{
}
#container {
min-height:100vh;
position:relative;
}
#header {
background-color : red;
height : 100px;
width:100%;
}
#main {
background-color : blue;
width:100%;
}
#footer {
position:absolute;
bottom:0;
background-color : yellow;
height : 100px;
width:100%;
}
<div id="container">
<div id="header">I'm a header that gets overlapped by the footer when the browser height is reduced</div>
<div id="main">I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</div>
<div id="footer">I'm a footer and I overlap all the other divs when the height of the browser is reduced</div>
</div>
You should be able to achieve this with a combination of overflow for the parent and using calc() for the height of main. Try the snippet below and play around with the height of the container. I would suggest to also give a min-height to main, so that it doesn't collapse entirely, but that depends on your needs.
In general, however, I think flex is the cleaner solution, see the other answer(s).
#container {
overflow: auto; /* Show scrollbars if content larger than #container */
height: 320px;
}
header {
width: 100%;
height: 100px; /* Absolute height */
background-color: red;
}
main {
width: 100%;
height: calc(100% - 200px); /* Dynamically calculated height */
overflow: hidden;
background-color: blue;
}
footer {
width: 100%;
height: 100px; /* Absolute height */
background-color: yellow
}
<div id="container">
<header>I'm a header that gets overlapped by the footer when the browser height is reduced</header>
<main>I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</main>
<footer>I'm a footer and I overlap all the other divs when the height of the browser is reduced</footer>
</div>
Also note that HTML5 gives you the actual elements header, main and footer, so you should use these in favor of divs.
This question already has answers here:
Force sidebar height 100% using CSS (with a sticky bottom image)?
(17 answers)
Closed 8 years ago.
I have a issue with the left sidebar.
I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.
<div class="container">
<div class="leftwrapper">Some text</div>
<div class="rightwrapper">Some text for right</div>
</div>
Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/
Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.
Simply change your CSS thus:
html, body { /* ensure the available document space is the full height of the viewport */
height:100%;
padding:0;
margin:0;
}
.container {
overflow: hidden;
position: relative;
height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
background-color: #0b7582;
bottom: 0;
float: left;
position: absolute;
text-align: center;
top: 0;
width: 8%;
bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
float: left;
margin-left: 8%;
width: 92%;
}
Add the following rule to the top of your CSS:
html, body, .container, .leftwrapper {height:100%;}
Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)
CSS rules:
html,body{height:100%;}
.sidebar{height:100%;}
Given a 2 pane 100% height based faux column layout, I am trying to have a sticky footer in the right column that does not float over the column's content if the browser viewport is too small to display all the content.
My current problem is that the footer will float over the content if the browser viewport is to small.
This is what I am after:
With the code below though the footer (3) will move over the content (2).
Explanation:
Sidebar - this will have to extend to 100% height of the browser viewport or the combined height of 2+3 (whichever is greater)
Content - Varying amounts of content.
Footer - fixed height footer. This is either at the bottom of the browser window or below the content from no.2 whichever is greater.
Current html:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="footer"></footer>
</div>
</div>
Current css:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0 auto;
width: 1000px;
height: 100%;
}
#sidebar {
width: 400px;
height: 100%;
float: left;
}
#content {
width: 600px;
float: left;
}
#footer {
position: absolute;
bottom: 0;
height:200px;
}
Any help or pointers to get the footer to stay below the content no matter what would be much appreciated.
You need something like this? http://jsfiddle.net/L6BLa/3/
I think this is the concept you're looking for: http://www.cssstickyfooter.com/
Applied the CSS/HTML on the site above to the Fiddle made by Nick: http://jsfiddle.net/L6BLa/2/
Note that you need to move #footer to the outside of #wrapper.
Caveat: #sidebar will only extend as far as the height of its own contents, not the combined height of #content + #footer. You can make #sidebar appear to extend the full length by giving #wrapper the sidebar background and making #sidebar's background transparent.
I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.
It seems like the footer doesnot recognize that the content is absolute. Heres my code
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>
If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?
Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.
<script>
(function(){
var wrapper = document.getElementById("wrapper");
var height = document.documentElement.scrollHeight;
wrapper.style.height = height + "px";
})();
</script>
Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.
To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/
html, body {
height: 100%;
width: 100%;
padding: 0; /* Get rid off the padding */
}
.wrapper {
position: relative; /* Necessary to properly deal with absolutely positioned
child elements. */
height: 100%;
margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
height: 4em;
position: fixed; /* Positions your footer at a fixed position in the window*/
bottom: 0; /* At the bottom of the window*/
}
You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.
The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.
give your footer a fixed hight and then in your absolute class, do
bottom: heightOfYourFooter + 5px;