In my css, I have the height of the parent set to 75px, and the height of the child set to 100%, and it displays correctly. However, when I change the parent's height attribute to a min-height of 75px instead, the child shrinks to the height of the text it contains, but the parent's height stays 75px. Why doesn't the child stay 75px?
#parent{
height:75px;
background-color:navy;
clear:left;
}
#child{
width:300px;
height:100%;
background-color:aqua;
float:left;
}
Here, the child is 75px like it is supposed to be.
#parent{
min-height:75px;
background-color:navy;
clear:left;
}
#child{
width:300px;
height:100%;
background-color:aqua;
float:left;
}
The child is only 21px high now.
I believe this has been a longstanding bug (or 'feature') in CSS. See https://stackoverflow.com/a/3808701/1608085
In short, you can use
min-height: inherit;
in the child to correctly inherit the min-height property from the parent.
Related
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
Whats wrong with this?
CSS:
width:auto;
height:auto;
min-width:500px;
min-height:500px;
The width works and dynamically re-size to the window, but the height just gets set to the min-height.
JSFiddle DEMO
It has nothing to adjust to, you need to set
body,html{
height: 100%;
}
and change height to 100% instead of auto if you want it to take up the size
#div1 {
width:auto;
height:100%;
min-width:500px;
min-height:500px;
background-color:#F00;
}
I have a element (represented as aside) that I need to span the full height of the page. However, the height is appearing to be ineffective with "height 100%".
Here is the fiddle: http://jsfiddle.net/h18ctmfq/
aside{
width:300px;
float:left;
background-color:#808080;
height:100%;
}
Add this
html {
height: 100%;
}
JSiddle Demo
#userIDTableCell
{
border-style:solid;
border-color:#000;
border-width:0px;
min-height: 130px;
}
When I use the min-height attribute, the top div overlaps the bottom divs.. but when I remove it, then the bottom divs will move proportionally with the top div; which is what I want to happen when I set a min-height value.
The research I've done and the things I've tried don't seem to work. I've tried setting the other div's to relative and that doesn't work. Not sure how else to override this. I've also tried setting the div as a float..
You should set your height to auto if you are using the min-height attribute.
#userIDTableCell
{
height: auto;
border-style:solid;
border-color:#000;
border-width:0px;
min-height: 130px;
}
I'm very surprised: there are tons of posts asking about 100% height situations, but the ones that include *margins in the child element don't yield any workable responses.
Surely this is very common, no? I'm struggling with my margins causing the child element to overflow. See fiddle below.
My CSS is like so:
html, body {height:100%} // definitely doing that one for 100% height issues
div {
box-sizing:border-box; // I like my box model consistent, need only webkit
}
#outer {
border:1px solid #f00;
position:absolute; // this is a requirement
top:40px;
left:12px;
width:300px;
}
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
margin:10px 20px;
height:100%;
width:100%;
}
Fiddle: http://jsfiddle.net/3aPzq/
The prized question is: how to get the child element (green border) to properly be inline of its parent, with correct margins?
You can't use width 100% in the case, because width is calculated before apply the margin. So the inner div will have 300px width, and then 20px margin.
It's better to use only margin parameters:
#inner {
position:relative;
border:1px solid #0f0;
margin:10px 20px 10px 20px;
}
if you wanna have inner box stay inside the outer box, then i wouldn't use margin, instead i'll use padding
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
padding:10px 20px;
height:100%;
width:100%;
}