I have a sidebar that is position:fixed and height:100%
However, the effect is not what I desire. The height 100% is 100% of window where as I need to to be 100% of it's container, which is confined between the header and footer. The header is also fixed so the main content scrolls "underneath" it meanwhile the footer is anchored to the bottom of the main content which can be of variable height depending on how much content is loaded.
In this jsfiddle I have set the height of the ul#toolBarList to 200px to demonstrate. If you enlarge the window and scroll down, the sidebar should take the full white-space height. I do not mean to simple set a background behind the list, but rather that the bottom of the sidebar should anchor to the top of the footer.
To see why 100% doesn't work, set 200px to 100% and witness how the list overflows the footer.
Answer can be some concise javascript or perferably all CSS with compatibility with IE8+, latest chrome/firefox.
Much thanks
You need to set the height of all of its parent elements to 100% or just use this CSS instead of the height:
top: 0;
bottom: 0;
right: 0; //whichever side you want it on
100% height only works when the parent element has an explicit height set. You can achieve 100% height by setting 100% height on the html element, body element, and any other container elements in between. For example,
<html style="height: 100%;">
<body style="height: 100%;">
<div id="page" style="height: 100%;">
<div id="sidebar" style="height: 100%; float: left;">content</div>
<div id="main" style="height: 100%; float: left;">content</div>
</div>
</body>
</html>
Related
I am building a page HERE and I'm having trouble with the footer. I've done a lot of research looking at sticky footers and wrapping everything in containers... and my head is spinning.
The goal of the site is to display the song lyrics on the right as the title is clicked on the left, and it works miraculously well. The problem is that the footer doesn't move with the lyrics...
Your help is much appreciated!
When you used position:absolute for any element then you must add to position:relative their parent element otherwise it not work.
body {
position: relative;
padding-bottom: 50px;
}
Or If you don't want add this in body then just wrap all the divs on one parent div like .wrapper and this css in that.
<div class="wrapper">
<div class="header"></div>
<div class="banner"></div>
<div class="container clearfix"></div>
<footer></footer>
<div>
Also add clearfix class in container div because its have float element
You can fix or make a sticky footer by using CSS or you can just put this CSS for you footer.
.footer-class{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
Position is fixed for footer will never move in any page.
bottom 0 will fixed the footer at the bottom.
left and right 0 will placed the footer in the screen.
Width 100% will show the full width.
z-index will show at the front. Placed everything will behind the footer.
So I have a div that i want to position at the bottom of my page, with the body of the div completely hidden below the user's viewport, except the entirety of a header which is fixed to the bottom of the page.
Contraints:
The height of the entire div is dynamic, as there can be any number of items in there
The header of the div is contained entirely within the div, syntax-wise
Ideally I'd like to do this completely with CSS, but if a little bit of JavaScript is needed, that's fine too.
Any ideas on how this can be done? position: fixed and bottom: (height of header - height of div) doesn't work because the height of the div changes when you resize the viewport.
Figured it out. Here's my solution. The key is to have a wrapper that is the same height as the header that you want sticking out, and apply position fixed and bottom 0 to that parent wrapper.
html
<html>
<body>
<div class="wrapper">
<div class="wrapper-top">
</div>
<div class="wrapper-bottom">
This can be variable height
<div>
</div>
</body>
</html>
css
.wrapper {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.wrapper-top {
height: 50px;
width: 100%;
}
I can't figure this out and it's probably fairly simple. I have several DIV elements that I need placed side by side (with no margin in between), and each div must have a set width of 100% of the browser width and min-height of 100% of the browser.
Like I said I'm sure there's a quick and easy trick to this, I just couldn't find much in my research. Thank you much!
Update: This seems to work:
http://pastebin.com/kuQyfwuG
Maybe you can wrap all your divs in a container div whose width is a lot bigger than the width of the browser (or at least the total width of all your divs laid side by side):
HTML
<div id="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
CSS
body {
overflow: hidden;
}
#container {
width: 10000px;
height: 100%;
}
.element {
min-height: 100%;
...
}
jQuery
$('.element').css('width', window.innerWidth);
body was given the property overflow: hidden; so that no horizontal scrollbars will be shown because of #container's size. And since giving .element a width of 100% will make it as wide as the #container element, you can add a little jQuery to make their width equal to the window's/browser's width.
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
See any page on kranedesign.com
If you decrease the size of your browser horizontally, the main content drops below the navigation. I'm not sure where or how in the CSS to fix this. Ideally, I would like it to scale to fit...but even just a horizontal scroll bar would be better.
Your #outer container div should have the following CSS:
#outer {
width: 1160px;
position: relative;
overflow: hidden;
}
Your #aside and #primary are floated with fixed widths, but their container #outer has a width of 100% which means the width changes. So when the browser window width changes to a value less than the width of #aside and #primary combined, then #primary will drop below the #aside div.
You should have a container div. Like:
<div id="container">
<div id="nav"></div>
<div id="content"></div>
</div>
Then give the container class a overflow : hidden (stretch the container div) and give the container div a width. I think your navigation and content are floated?