I'm trying to create a page with a panel on the left side. The panel has a header, a content area and a footer. The main panel wrapper div is supposed to be 100% of the height of the page. The header and footer do not have a specified height because I only want them to be large enough for their text and padding while the center content area I want to be 100% of the container minus whatever the height of the header and footer is. I'm not sure how or if I can do this in css. Anyone know what to do here? Thanks.
The html page & css is here - https://gist.github.com/1641918
You can use display as table to accomplish this. By setting a height of 100% on the content 'row' and then 0% on the others. Tables try and make their rows match as closely as possible the specified heights.
http://jsfiddle.net/PZALU/
html, body { height: 100%; width: 100%; }
div#container { display: table; height: 100%; width: 100%;}
div#container > div { display: table-row; }
div#container > div > div { display: table-cell; border: 1px solid gray; }
div#header { height: 0%; }
div#content {height: 100%; background: lightgray; }
div#footer { height: 0%; }
I have dealt with this on several occasions. It is possible to to with just CSS in one or two specific cases from my experience. Otherwise, you would need to tag team it with Javascript and CSS. Because, in order to set an element to 100% height, its parent element's height must be delared. Depending on how deeply nested the element is and what siblings it may or may not have before it, will determine if its possible to do with CSS alone.
One method of getting a conent container div to be 100% of the height browser's viewport is via the following styles.
html {
height:100%;
}
body {
height:100%;
}
#container {
min-height:100%;
max-height:100%;
}
<html>
<body>
<div id="container">
...
</div>
</body>
</html>
It can easily get tricky depending on the layout.
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
I am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.
I have a div with id="footer" and the following CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.
How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.
Image:
This is precisely what position: fixed was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
HTML
First you need to wrap your header,footer and #body into a #holder div:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
for html layout
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
plunker
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
You didn't close your ; after position: absolute.
Otherwise your above code would have worked perfectly!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">.
see http://caniuse.com/#search=position
This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag.
I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!
This is because setting height: 100% only picks up parent div's height!
So if your entire html (inside of the body) looks like the following:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Then the following will be fine:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
...as "holder" will pick up it's height directly from "body".
Kudos to My Head Hurts, whose answer was the one I ended up getting to work!
However. If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing element also has height: 100% set on the div. Otherwise, the information on height will be lost between "body" and "holder".
E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
And remember to set height on full-height class in the css:
#full-height{
height: 100%;
}
That fixed my issues!
if you have a fixed height footer (for example 712px) you can do this with js like so:
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
I hit my footer with a margin-top: auto and it did the trick! Im commenting this here just in case it could help any future visitors.