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>
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 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>
Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.
I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height
It seems the answers here ignored most of your requirements. I stumbled upon this because I am having a rendering issue with the same layout you are after. I forked the fiddle above to show you:
http://jsfiddle.net/RsRf9/2/
The major difference is that the entire body is scrollable, not just the tiny area in the center (I think this is what you are after).
Aside from cleaning up styles that weren't doing anything (like floats while position fixed), the major change is to the center col - all you should need is this:
.center{margin:100px 200px;}
The other change is how you get that "height 100%" effect on your sidebars - my trick is to do this:
.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
Instead of height 100%, I simply tell it to stretch from top 100 (the bottom of the nav) to bottom 0 (the bottom of the page)
That will push the content bellow the top nav and in between your two fixed side bars.
I have created a working fiddle as per your requirements:
Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED
The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center ... blah</div>
</div>
</div>
and the css is:
JUST HEADER FIXED:
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)
It's basic use of floats but the structural markup layout is key ;)
I use the YUI grids style sheet for this kind of layout. It is tried and tested and works in multiple browsers.
This is actually quite easy to do in a rudimentary sense, you don't need tables (or table-cell) but mixing px and % sizes can be problematic. If you stick to % your page will resize better anyway. Handling the cross browser issues takes a bit more CSS tweaking, but there are plenty of grid solutions out there that implement tried and tested solutions even for IE6 and frameworks like twitter's bootstrap will offer a lot more on top.
In other words, this is a solved problem, but here's a quick example of how you can get there by hand;
<div class="container">
<div class="header">
header
</div>
<div class="left">
left
</div>
<div class="main">
content
</div>
<div class="right">
right
</div>
</div>
And the CSS;
html, body, .container
{
height:100%;
}
.container
{
background-color: pink;
}
.header
{
background-color: yellow;
height:50px;
}
.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}
And of course the Fiddle
Using % sizing will also allow you to approach a more responsive design that works for tablet and mobile. Again, many of the grid frameworks out there are 'responsive' in design.
You can use scrollToFixed plugin for left-sidebar and right-sidebar fixed and center column content only scroll up side and downside.
For demo scroll use below link
http://bigspotteddog.github.io/ScrollToFixed/
And one more thing use Bootstrap for design UI.
Include Bootstrap CSS and JavaScript in your page header part
<div class="container">
<div class="col-md-12">
<div class="col-md-3" id="left-sidebar">
left-content
<div>
<div class="col-md-6" id="center">
center content
</div>
<div class="col-md-3" id="right-sidebar">
right-content
</div>
</div>
</div>
You can modify as per your requirement. I just give you general hint.
Just write below script for scrolling
$(document).ready(function(){
$('#right-sidebar').scrollToFixed({
marginTop: function() {
return 5;
},
limit: function() {
return (
$('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
);
},
zIndex: 1,
removeOffsets: true
});
});
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
I need to stretch main div height to the view-port height and place the footer at the bottom of the screen. could anybody solve this?
body{text-align:center;}
#main{width:200px;margin:0px auto;background:#cccccc;}
#header{height:20px;background:#00FFFF;}
#content{height:80px;background:#cccccc;}
#footer{background:#0000FF;height:20px;}
.demo{width:90%;margin:0px auto;}
<div id="main">MAIN
<div id="header" class="demo">HEADER</div>
<div id="content" class="demo">CONTENT</div>
<div id="footer" class="demo">FOOTER</div>
</div>
This way of doing it works pretty well: http://www.xs4all.nl/~peterned/examples/csslayout1.html
You could try 'position:fixed; bottom: 0px' on the footer div.
That will work fine, but could be a problem if the content-height gets bigger than the screen size.. if the box main can be at 100% screen size then i would try something like this:
#main{
position:relative;
min-height:100%;
height:100%;
height:auto !important;
}
#footer{
position:absolute;
bottom:0px;
}
All the heigth values are just to make the content at least fit the screen size, but it may expand if the content becomes bigger.
Gushiken
I've churned on trying to do this strictly with CSS on several occasions (with cross-browser compliance in mind). I find it easier just to write a quick jQuery script which handles resizing the div to the appropriate size.
$(document).ready(function () {
/* this could be something different, like subtracting the height of your footer or something */
$(window).resize(function () { resizeMyDiv(); });
});
function resizeMyDiv() {
$("#divResize").height($(window).height());
}
Not sure if you're using jQuery, but it seems to be easier to do it this way.