I have 3 < div > elements stacked on top of each other on screen.
<div id="header"></div>
<div id="content" style="height:900px;width:1400px; "></div>
<div id="footer"></div>
I need to keep stated exact size of central DIV and I need 'header' and 'footer' to fill the space (remaining from 'content' height) on top and on the bottom equally, so all three DIVs would occupy exact window height.
Also I'd like header and footer have set some minimum height (so if screen becomes too small, these DIVs would keep some height, keep showing their contents, and scroller appears).
I can possibly do int in JS but CSS must be possible. Thanks in advance!
You can do it quite easily in JS with jQuery using the following javascript code:
var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);
You should put that code somewhere where you will make sure to call it in case the layout changes or in $(document).ready() if the page layout will be static.
And in order to preserve the minimum heights of #footer and #header use the min-height properties in CSS.
Here's and example: http://jsfiddle.net/4h5f8/17/
Try this code and see if it is what you need:
<html>
<head>
<style>
#header {
min-height:50px;
height:10%;
background-color:grey;
}
#content {
height:80%;
background-color:#EEEEEE;
}
#footer {
min-height:50px;
height:10%;
background-color:grey;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Related
<div id="header">
<div>My</div>
<div>Header</div>
</div>
<div id="content"></div>
In the above markup, how can I get the content to fill the rest of the screen (no-scrolling)?
I know how to do this with absolute positions if the header was of a fixed height, but my header's height is dynamically set by its contents (so the site is responsive on mobile devices.)
Btw: I'm looking for a CSS only solution, because I think JavaScript is not made for this kind of task.
Thanks a lot,
The simpliest way is to draw the background in body and keep #content translucide. DEMO 1.
This way, you do not mind #header nor #content heights.
If you do not mind about IE7 and less, then display:table/table-row/table-cell taken from defaut display of HTML table elements can be what you need , in the case header has unknown height. DEMO 2
Your structure will need a bit of update in order to act as wished and to avoid gaps in layout render from header part to the content part.
If you reset display to be used as table properties, it will do so and can draw cols and rows.
Since it is only the row properties that will be usefull, Structure must be rendering as one single col and multiple rows.
Basic structure needs to turn this way :
<div id="header" class="row">
<div class="single">
<div>My</div>
<div>Header than can grow</div>
</div>
</div>
<div id="content" class="row">
<div class="single">
<p>My Content that will fill remaining space untill page has to scroll</p>
</div>
</div>
And basic CSS turns this way :
html, body {
height:100%;
width:100%;
margin:0;
}
body {
display:table;/* it will allow to grow over initial width specified */
/* table-layout:fixed; only if you want to control width within value specified*/
background:#edc;
}
.row {
display:table-row;/* we want these elements to stack on top of each other, not to become cells aside each other */
}
.single {
display:table-cell;/* this 'buffer' element is used to avoid layout to turn into multiple cols */
}
#content {
height:100%;/* since layout is the one taken from table properties, it means fill all space avalaible that #header doesn't use */
background:#cde;
}
In the case, *#header has a known*** height, it can be set in fixed or absolute position.
#content can be 100% height DEMO 3, better: min-height:100%; DEMO 4
display:flex could be useful too but for real young browser only :).
Example with display:flex;
html {
height:100%;
}
body {
margin:0;
min-height:100%;
background:#edc;
display:flex;
flex-direction:column;
}
#header {
/* nothing needed here */
}
#content {
flex:1;/* since it is the only one getting a flex attitude, it will fill up all space avalaible*/
background:yellow;
}
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I have a problem concerning a layout I have to create. The upper layout is the one I currently have. When the Main-div expands by adding content to it, the footer's vertical position increases, which is what I want. But when there's only little content in main, there's space between the footer and the screen's lower border, which is ugly ;) I tried to place the footer sticky to the bottom. The result: when adding much content to main, the footer lies above the main div and its content :( It's a little bit hard to explain, but I think you know, what I mean.
What I want to accomplish is the lower layout. The main div should be "screen.height - header.height - footer.height".
Is this possible? Thanks in advance!
Bye The_Unknown
Try this:
<style type="text/css">
html,body {
height:100%
}
#wrapper {
min-height:100%;
margin-bottom:-150px; /* negative total computed height of footer */
}
#footer_padding {
height:150px; /* total computed height of footer */
}
#footer {
height:100px;
margin-top:50px;
}
</style>
<div id="wrapper">
<div>some content...</div>
<div id="footer_padding"></div>
</div>
<div id="footer"></div>
I need to put two divs side by side. First div should have constant width, second take rest free space. Both of the div should has the same height but at least should takes all browser screen. I have written the following code:
<head id="Head1" runat="server">
<title>My Testing page</title>
<style type="text/css">
#mainDiv { height:100%;}
#leftDiv {float:left; width:200px; height:100%;}
#rightDiv { height:100%; }
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</div>
</body>
But height of the right div is always set to 100% of browser screen, Even if content of this div is bigger. I would like have resizable height of those divs.
As far as I know height:100% would act as a fixed height according to the browser's height.
so why dont you put
min-height:100%.
This should work but I havent tested it myself tbh.
I've got a simple CSS:
div.header
{
width:auto;
}
div.footer
{
clear:both;
}
div.middle
{
margin:5px 0 5px 0;
}
div.links
{
width:200px;
float:left;
}
div.content
{
width: 900px;
margin-left:210px;
}
and a simple page:
<div class="header">
<!-- some control inside -->
</div>
<div class="middle">
<!-- left navigation list -->
<div class="links">
<!-- some control inside -->
</div>
<!-- content place -->
<div class="content">
<asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footer">
<!-- some control inside -->
</div>
The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?
When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:
<div class="links">
<!-- some control inside -->
<div class="footer"></div>
</div>
If you plan on having more style on footer you might want to create a new class just for this purpose.
I think there are two ways you can solve this:
overflow on .middle:
.middle {
overflow: hidden;
}
put your footer (or another div with clear:both) inside middle, after the other two divs
http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html
heres an article about floating divs not expanding their parent divs
You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:
$("#links").click(function() {
var footer-height = $("#footer").css("height");
var links-height = $("#links").css("height");
var links_resize = ...code to determine how much to resize links div ....
$("#footer").css("height, " footer-height - links_resize);
$("#links").css("height, " links-height + links_resize);
});
Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.
Maybe IE8 was supposed to fix this issue, but it isn't fixed.
Take the code from that article for example
<style>
.container
{
width:300px;
background-color:green;
}
.box
{
float:left;
width:100px;
height:100px;
border:3px solid red;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)