I have the following HTML.
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.
My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?
Please note that I am using Bootstrap 3.
It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.
Demo here!
You can use the viewport percentage. See this fiddle
Relevant lines:
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:
body
{
padding:0px;
margin:0px;
}
See support here.
See this answer for more details.
For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.
Related
I am trying to make my footer "sticky" but the heights vary so can't use most of the methods I've found or flexbox. Is there any way to check with javascript how much space is under a div so I can add that much margin?
The html looks like this:
<container>
<header></header>
<body><sometimes sub content></sub content></body>
<footer></footer>
</container>
Also tried putting the footer outside of the container, saw that in some solutions, but again they all require a fixed height.
You can check if $(document).height() > $(window).height(). That will tell you if the height of the content is longer than the viewport. If so, leave the footer where it is. If the doc height is <= the viewport height, add make the footer sticky. Like so:
To see the difference between sticky and non-sticky, run the snippet below to have the footer at the bottom of the page. To view it where the footer is sticky, run the snippet in full screen mode (on the top right corner of the snippet output). You can also just run it in full screen mode and then shrink your browser size down - it recalculates on window resize.
$(window).on("load resize", function() {
// if content height <= viewport height, make footer sticky
// else leave footer at the bottom of the content.
$(".footer").toggleClass("sticky", $(document).height() <= $(window).height());
});
.footer {
width: 100%;
background-color: #555588;
color: white;
}
.sticky {
position: fixed;
bottom: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre style="font-size: 16px;">
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
</pre>
<div class="footer">foo foo foo <br/>foo<br/>foo<br/></div>
You can set the main minimum height to 100vh, and position the footer at the bottom absolutely. The main should have bottom padding to at least the height of the footer, and box-sizing: border-box to main the 100vh height.
However the example to see the sticky footer in action.
body {
margin: 0;
}
main {
position: relative;
padding-bottom: 60px;
min-height: 100vh;
box-sizing: border-box;
}
.hidden {
background: blue;
height: 100vh;
}
main:not(:hover) > .hidden {
display: none;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
background: red;
}
<main>
<article>Short Article</article>
<article class="hidden">
long article
</article>
<footer>
I'm the footer
</footer>
</main>
This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.
https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>
Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/
I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i'm trying to positionate a footer (#footer) like the following:
It has to have a
margin-top: 50px;
to the div above (#content) BUT if the div above is in the display (eg in the middle) the footer should be at least
bottom:-100px;
AND if the div above (#content) is also out of the display (lower that bottom -100px) the footer should be under that div.
Is that possible? (if theres no other way with jq/js)
Thanks in advance for your help
JSFIDDLE EXAMPLE:
http://jsfiddle.net/nU7Vh/1/
If the height of #content is for eg 300 everything is ok, but if #content (which can have variable sizes, cause its a list which is queryed) is bigger that the display the #footer isnt under the #content anymore
1. Remove the following 2 lines from #footer:
position:absolute;
bottom:-100px;
2. Add a container div to #content, which will (unlike #content, which may have any height as you stated) have a min-height of 100% of the screen (you can of course change 100% to a different percentage if you like).
<div id="meta_content">
<div id="content">
</div>
</div>
3. Add this CSS, which makes the min-height magic happen:
html, body {
height:100%;
}
#meta_content { min-height:100%; }
jsFiddle demo.
You could use a wrapper element (with min-height:100%), and not use absolute positioning.
HTML
<div class="wrap">
<div id="content"></div>
</div>
<div id="footer"></div>
CSS
html,body{height:100%;}
.wrap{min-height:100%;}
Demo at http://jsfiddle.net/gaby/rXZkx/
You must configure a surrounding element (e.g. HTML) to fill at minimum the height of the window and allow an inner one (e.g. BODY) to overflow when higher:
CSS
html, body {
margin: 0;
padding: 0;
}
html {
height: 100%; /* fill up window height and let body overflow if higher */
}
body {
position: relative;
min-height: 100%;
padding-bottom: 50px; /* space for footer */
box-sizing: border-box; /* padding should not be added to height, but included in height */
}
#content {
height:200px;
width:500px;
background: blue;
opacity: 0.5;
}
#footer {
height: 18px;
width: 500px;
position:absolute;
bottom: 0px;
background: red;
opacity: 0.5;
}
http://jsfiddle.net/x4TPf/
How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.