CSS - Fill remaining height (dynamic content) - css

<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;
}

Related

How to making full height on every screen for section or div inside body?

Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
i need both has full-height has to come to bottom of the screen even there is very low contents.
now it looks like
here my fiddle
demo
moreover i tried full height for body and html to
body, html{
height:100%;
}
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used normalized.css to reset the styles and avoid the default margins otherwise applied to the display: table; div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Use :
display: table-cell
Here's the result:
http://jsfiddle.net/GhxQL/6/
You've got the right CSS in your fiddle; you just have some errors in the code.
Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.
Updated fiddle: http://jsfiddle.net/hqkVh/7/
Ok Let's make the equation HARDER !!
so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?
if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely
You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution
PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT
I suggest Use Min-Height 100% and Height Auto

3 column, fixed header, sidebars fixed, content scrollable

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
});
});

Trouble positioning divs inside other divs

Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/

Sticky footer with a height 100%-body -> possible without javascript?

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>

align a variable width div in the center

Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.

Resources