I have a site with the following structure:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.
How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?
If you don't mind the navigation div being clipped in the event of an unexpectedly-short content div, there's at least one easy way:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Elsewise there's the faux-columns technique.
using jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});
I had the same issue, it worked based on Hakam Fostok's answer, I've created a small example, in some cases it might work without having to add display: flex; and flex-direction: column; on the parent container
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
[Referring to Dmity's Less code in another answer] I'm guessing that this is some kind of "pseudo-code"?
From what I understand try using the faux-columns technique that should do the trick.
http://www.alistapart.com/articles/fauxcolumns/
Hope this helps :)
height : <percent> will only work if you have all parent nodes with specified percent height with a fixed height in pixels, ems, etc. on top level. That way, the height will cascade down to your element.
You can specify 100% to html and body elements as @Travis stated earlier to have the page height cascading down to your nodes.
This trick does work: Adding a final element in your section of HTML with a style of clear:both;
<div style="clear:both;"></div>Everything before that will be included in the height.
You use CSS Flexbox
.flex-container {_x000D_
display: flex;_x000D_
background-color: DodgerBlue;_x000D_
}_x000D_
_x000D_
.flex-container > div {_x000D_
background-color: #f1f1f1;_x000D_
margin: 10px;_x000D_
padding: 20px;_x000D_
font-size: 30px;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="flex-container">_x000D_
<div>1</div>_x000D_
<div>2</div>_x000D_
<div>3</div> _x000D_
</div>_x000D_
_x000D_
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>_x000D_
_x000D_
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>_x000D_
_x000D_
</body>_x000D_
</html>#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
Look at this example.
For the parent:
display: flex;
You should add some prefixes, http://css-tricks.com/using-flexbox/.
Edit: As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.
.parent {_x000D_
background: red;_x000D_
padding: 10px;_x000D_
display:flex;_x000D_
}_x000D_
_x000D_
.other-child {_x000D_
width: 100px;_x000D_
background: yellow;_x000D_
height: 150px;_x000D_
padding: .5rem;_x000D_
}_x000D_
_x000D_
.child { _x000D_
width: 100px;_x000D_
background: blue;_x000D_
}<div class="parent">_x000D_
<div class="other-child">_x000D_
Only used for stretching the parent_x000D_
</div>_x000D_
<div class="child"></div>_x000D_
</div>The easiest way to do this is to just fake it. A List Apart has covered this extensively over the years, like in this article from Dan Cederholm from 2004.
Here's how I usually do it:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
You can easily add a header onto this design by wrapping #container in another div, embedding the header div as #container's sibling, and moving the margin and width styles to the parent container. Also, the CSS should be moved into a separate file and not kept inline, etc. etc. Finally, the clearfix class can be found on positioniseverything.
I find that setting the two columns to display: table-cell; instead of float: left; works well.
After long searching and try, nothing solved my problem except
style = "height:100%;"
on the children div
and for parent apply this
.parent {
display: flex;
flex-direction: column;
}
also, I am using bootstrap and this did not corrupt the responsive for me.
Try making the bottom margin 100%.
margin-bottom: 100%;
giving position: absolute; to the child worked in my case
My solution:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});
There is a bit of a contradiction in the question's title and the content. The title speaks of a parent div, but the question makes it sound like you want two sibling divs (navigation and content) to be the same height.
Do you (a) want both navigation and content to be 100% the height of main, or (b) want navigation and content to be be same height?
I'll assume (b)...if that is so, I don't think you will be able to do it given your current page structure (at least, not with pure CSS and no scripting). You would probably need to do something like:
<main div>
<content div>
<navigation div></div>
</div>
</div>
and set the content div to have a left margin of whatever the width of the navigation pane is. That way, the content's content is to the right of the navigation and you can set the navigation div to be 100% of the content's height.
EDIT: I'm doing this completely in my head, but you would probably also need to set the navigation div's left margin to a negative value or set it's absolute left to 0 to shove it back to the far left. Problem is, there are many ways to pull this off but not all of them are going to be compatible with all browsers.
I know it's been a looong time since the question was made, but I found an easy solution and thought someone could use it (sorry about the poor english). Here it goes:
CSS
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
HTML
<div class="container clearfix">
<div class="sidebar">
simple text here
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
</div>
</div>
Simple example. Note that you can turn into responsiveness.
Based on the method described in this article I have created .Less dynamic solution:
Html:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Less:
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;
/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;
#container3 {
float: left;
width: 100%;
overflow: hidden;
background-color: red;
position: relative;
#container2 {
float: left;
width: 100%;
position: relative;
background-color: yellow;
right: @col3Width;
#container1 {
float: left;
width: 100%;
position: relative;
right: @col2Width;
background-color: green;
#col1 {
float: left;
width: @col1Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding;
overflow: hidden;
}
.col2 {
float: left;
width: @col2Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 2;
overflow: hidden;
}
#col3 {
float: left;
width: @col3Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 4;
overflow: hidden;
}
}
}
}
Add display: grid to the parent
As shown earlier, flexbox is the easiest. eg.
#main{ display: flex; align-items:center;}
this will align all child elements to the center within the parent element.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
From:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
states bootstrap but you do not need bootstrap to use this. Answering this old question, as this worked for me, and seems pretty easy to implement.
This was the same answer I provided to this Question
This answer is not ideal any more since CSS flexbox and grid where implemented to CSS. However it is still a working solution
On a smaller screen you would probably want to keep the height auto as the col1, col2 and col3 are stacked on one another.
However after a media query breakpoint you would like cols to appear next to each other with an equal height for all columns.
1125 px is only an example of window width breakpoint after which you would want to make all columns set to the same height.
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
You could, of course, set more breakpoints if you need to.
<script>
$(document).ready(function(){
$(window).on('load resize', function() {
let vraperH = $('.wraper').height();
if (window.innerWidth>= 1125) {
$('.col1').height(vraperH);
$('.col2').height(vraperH);
$('.col3').height(vraperH);
}
if (window.innerWidth < 1125) {
$('.col1').height('auto');
$('.col2').height('auto');
$('.col3').height('auto');
}
});
});
</script>
#main {
overflow: hidden;
}
#navigation, #content {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
This is a frustrating issue that's dealt with designers all the time. The trick is that you need to set the height to 100% on BODY and HTML in your CSS.
html,body {
height:100%;
}
This seemingly pointless code is to define to the browser what 100% means. Frustrating, yes, but is the simplest way.
Source: Stackoverflow.com