I am able to set sticky footer on web pages following instructions
http://css-tricks.com/snippets/css/sticky-footer/
It suggests min-height:100%and height not being set
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
However, in one of the page I need to set height:100% in.page-wrap to adjust height of its children. After I set height:100%, my sticky footer does not work and appears in the middle of page.
Is there a way to make sticky footer work with the height set to 100% in .page-wrap??
Remove height:100% element from container-fluid class
.container-fluid {
position: relative;
min-height: 100%;
/*height: 100%;*/ /*Remove the height and it will work fine*/
width: 100%;
border: 1px solid green;
}
DEMO HERE
.container-fluid
{
position:relative;
min-height: 100%;
width:100%;
border:1px solid green;
}
This will put the footer to the bottom of the page. This will work fine.
Related
so I have the following problem: I want to add a sidebar with a lot of content to my webpage. So the sidebar (div) should be scrollable and should also hide upon click.
To the right of the sidebar is my content. The content should always be to the right of the sidebar and the sidebar should never overlay parts of the content.
Here's my css:
div.sidebar {
position: fixed;
float:left;
left:0rem;
top:0rem;
bottom:1.2rem;
width:21rem;
background-color:rgb(110, 110, 110);
z-index:999;
overflow-y:scroll;
}
div.content {
border-width: 0;
margin: 2em;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
If the css is like that with position:fixed (or absolute) the sidebar is scrollable and the body does not scroll. But the sidebar hides parts of the content.
If I remove the "position:fixed" from the .sidebar the content aligns right of the sidebar but the sidebar is not scrollable anymore (now the whole page has a scrollbar).
Specifying overflow: hidden for the body of the page didn't help. Neither did removing any of the left, top, bottom, float etc. tags. What am I missing?
How can I achieve a sidebar that is scrollable but does not overlay the content. Thanks in advance for any help!
I think I found a solution for you:
Wrap contents of sidebar into second div and add some class attribute - .fixed in my example. Now, we make .fixed div fixed, .sidebar div will take the space, so .content won't be overlapped by .fixed. Remember to set the same width for .fixed and .content, so they take the same space . Now, set width: auto in .content div, so it take all the space and overflow: hidden.
Now, when .sidebar has display: none, fixed will be hidden, and .content will take all their space :D
CSS:
div.sidebar {
/* take space on the left */
float:left;
width:20%;
margin-bottom:100%;
background-color:rgb(0, 0, 0);
}
div.fixed {
/* display fixed menu */
position:fixed;
width:20%;
left:0rem;
top:0rem;
bottom:1.2rem;
z-index:999;
rgb(110, 110, 110)
overflow-y:scroll;
}
div.content {
width:auto; /* take all the space */
overflow:hidden; /* try using without it and see what happens ;) */
border-width: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
Working example: http://jsfiddle.net/z8dqhrf2/2/
on this page, i'm trying to get the footer (the newsletter signup form) to fall to the bottom of the page.
but #container is somehow bigger than the body and it's messing everything up. any ideas?
here is an image of the issue. the blue is the end of the tag. http://i.imgur.com/1Ww3C6R.png
body#page {
background-color: white;
background-image: none;
width: 100%;
height: 100%;
container {
width: 100%;
margin: 0 auto;
margin-left: 0px;
}
The problem is that your div.container is set to height:100%; It would be okay if it started at the top of the page, but it is offset by your header. You need to do following:
First of all, use border-box to keep all paddings within your elements' dimensions.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now you need to create a wrapper for your content and put your footer right below it
<div class="wrapper">
<div id="drawer">...</div>
<div class="container">...</div>
</div>
<footer>...</footer>
And css:
.wrapper{
height: 100%;
width: 100%;
padding-bottom:50px; /* reserving bottom space for footer */ }
.container{
display: inline-block; /* don't force it to 100%, just make it flexible */
float:left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
clear:both;
width: 100%; }
footer {
width: 100%;
float:left;
clear: both;
height:50px;
margin-top:-50px; /*moving it into the padded bottom space of wrapper*/ }
There you go. Now your footer will stick to your bottom of the page unless your content is larger than 100% of the screens height. Then it will just go down respectively.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).
CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.
Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
I am trying to force div #content to fill vertically #screen div which has fixed size and allows scrolling on horizontal axis. The problem is #header which fit its content so I am unable to set fixed height for #content. #content has columns which are horizontally scrollable.
Setting height in jQuery should be easy but I am looking for CSS-only solution.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
}
#content {
-webkit-column-width: 100px;
max-width: none;
height:100% ;/*can not set fixed number as #header height could change*/
}
http://jsfiddle.net/Y7sfc/2/
I'm not sure if I understand your question fully but iI'm assuming its something along the lines of you not wanting a vertical scroll bar? and only a horizontal overflow right?
I added a height: 20%; to your header (or whatever you want) and changed the height of your #content to fill the rest so in this case, height: 80%;.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
height: 20%;/*add up to 100%(total size) of #container along with other elements*/
}
#content {
-webkit-column-width: 100px;
max-width: none;
height: 80%% ;/*add up to 100%(total size) of #container along with other elements*/
}
I believe the problem is because your #header and #content are both inside #container which has a set amount of space. Since your #content was set to take heigh: 100% of the space inside #container the #header still had to make room thus pushing the limit above 100% and creating a vertical slide bar.
http://jsfiddle.net/Y7sfc/4/
http://jsfiddle.net/4ZC2A/
I'm trying to get my white wrapper div to have a height of 100% without messing up my sticky footer. I've tried removing height: auto !important so my wrapper div will extend 100%, but that messes up my sticky footer. It also causes the footer to overlap the pictures when resizing. Any help is appreciated thank you.
.supercontainer {
min-height: 100%;
height: 100%;
height: auto !important;
margin: 0 auto -100px;
position: relative;
background: #f8f8f8;
}
.wrapper {
border-right: 2px solid #e5e5e5;
border-left: 2px solid #e5e5e5;
background: white;
margin: 0 auto;
width: 1200px;
height: 100%;
padding-top: 50px;
}
Here's a working copy of your fiddle. Please do not use display:table
DEMO
Your code needs some site architecture. And as far as the wrapper overlapping your footer, if you mean going under it when you scroll, well, it has to go somewhere. You did want it fixed after all.
When making a footer fixed (sticky) you have to understand the page will reach its bottom and the footer will be there blocking it. SO you give the page a margin-bottom for the size of the footer to force that page bottom up like so
.wrapper {
margin: 0 auto 100px auto;
}