I have a parent which has the CSS property of table-cell, with a child element that need to be 100% the height of the parent. I cannot get this to work in IE Edge - any ideas?
<div class="table">
<div class="table-row">
<div class="table-cell-1">
<a>need 100%!</a>
</div>
<div class="table-cell-2">
some content<br>
that is <br>
quite high
</div>
</div>
</div>
.table {
display:table;
}
.table-row {
display:table-row;
}
.table-cell-1, .table-cell-2 {
display:table-cell;
width:100px;
}
.table-cell-1 {
background-color:red;
}
.table-cell-2 {
background-color:green;
}
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
See JS Fiddle: http://jsfiddle.net/82no4o0x/10/
You have this code:
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
You're asking the a to be height: 100%. But 100% of what? There is no frame of reference. None of the parents have any height specified.
To see what I mean, make this adjustment to the parent:
.table-cell-1 {
background-color:red;
height: 100px; /* new */
}
Now it should work. See demo: http://jsfiddle.net/82no4o0x/23/
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
Read more here: Working with the CSS height property and percentage values
Because you haven't defined the table or the table row with a height, when you give the link a height of 100%, the link doesn't know what you want it to be 100% of. Although it looks pretty straight forward to you and me. So first of, try giving your table a fixed height and then making your cells height 100%... But I'm guessing you don't want to do that because you want it to grow or shrink depending on the content within it. I tried a few techniques using position absolute on the cell and positioning it relative to the row, but that didn't work in IE for some reason. So I came up with a bit of a trick/hack using a large top and bottom padding and a negative top and bottom margin.
.table-cell-1 { overflow:hidden }
.table-cell-1 a {
padding:2000px 0;
margin:-2000px 0;
}
https://jsfiddle.net/82no4o0x/24/embedded/result/
I have set fixed pixel width values for a three column layout, and want to use display:table-cell properties so that the columns will always snap to the height of the column div with the largest content.
I have used this technique before no problem, but I now can't seem to get the column width to fix, and instead, if the content in a div increases it makes the div wider instead of taller, at the same time this compresses the width of the adjacent cells. Obviously the whole point I'm using table-cell is to stop this happening, can anyone see what is stopping the column widths working? In the JSFiddle the widths initially look correct but if you add extra text into any of the columns you will see that it doesn't respond as I need it to.
JSFiddle here
The html/css below are as per the JSFiddle above:
<div class="container">
<div class="fwcol">
<div class="col">
<div class="thirds">COLUMN1</div>
<div class="thirdm">COLUMN2</div>
<div class="thirds">COLUMN3</div>
</div><!--col-->
</div><!--fwcol-->
</div><!--container-->
.container {
margin: 0 auto;
width: 966px;
background:red;
overflow:hidden;
}
.fwcol {
float: left;
width: 966px;
}
.col {
width:966px;
display:table;
border-collapse:separate;
border-spacing:20px;
}
.thirds, .thirdm {
display: table-cell;
padding: 20px;
background: #FFF;
}
.thirds {
width: 255px;
}
.thirdm {
width: 256px;
}
Add these two properties to .col class:
display:table;
table-layout:fixed;
You may also add "word-wrap:break-word;" to child divs to prevent overflow.
I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody
Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}
The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/
In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo
You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)
I have a header element and a content element:
#header
#content
I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.
It this possible without Javascript?
forget all the answers, this line of CSS worked for me in 2 seconds :
height:100vh;
1vh = 1% of browser screen height
source
For responsive layout scaling, you might want to use :
min-height: 100vh
[update november 2018]
As mentionned in the comments, using the min-height might avoid having issues on reponsive designs
[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then -- vmax is still not supported in IE, so this might not be the best solution for all yet.
The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Actually the best approach is this:
html {
height:100%;
}
body {
min-height:100%;
}
This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.
Technical Solution - EDITED
Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.
You can use vh on the min-height property.
min-height: 100vh;
You can do as follows, depending on how you are using the margins...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
The accepted solution will not actually work.
You will notice that the content div will be equal to the height of its parent, body.
So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.
With HTML5 you can do this:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
For me, the next worked well:
I wrapped the header and the content on a div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this reference to fill the height with flexbox. The CSS goes like this:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
For more info about the flexbox technique, visit the reference
Please let me add my 5 cents here and offer a classical solution:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
This will work in all browsers, no script, no flex. Open snippet in full page mode and resize browser: desired proportions are preserved even in fullscreen mode.
Note:
Elements with different background color can actually cover
each other. Here I used solid border to ensure that elements are placed
correctly.
idHeader.height and idContent.top are adjusted to include border,
and should have the same value if border is not used. Otherwise
elements will pull out of the viewport, since calculated width does
not include border, margin and/or padding.
left:0; right:0; can be replaced by width:100% for the same
reason, if no border used.
Testing in separate page (not as a snippet) does not require any
html/body adjustment.
In IE6 and earlier versions we must add padding-top and/or
padding-bottom attributes to #idOuter element.
To complete my answer, here is the footer layout:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
And here is the layout with both header and footer:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH
Be sure to also have the height of html and body set to 100%, too.
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS:(adding background-color for visual effect only)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.
height: 100vh;
Unless you need to support IE 9 and below, I would use flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
You also need to get body to fill the whole page
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
CSS PLaY | cross browser fixed header/footer/centered single column layout
CSS Frames, version 2: Example 2, specified width | 456 Berea Street
One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
The best solution I found so far is setting a footer element at the bottom of the page and then evaluate the difference of the offset of the footer and the element we need to expand.
e.g.
The html file
<div id="contents"></div>
<div id="footer"></div>
The css file
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
The js file (using jquery)
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
You might also like to update the height of the contents element on each window resize, so...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Have you tried something like this?
CSS:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>