Is it a good practice to give children of a container their individual heights even if the parent container already has a height property and if not is there any way of passing the parent containers height to some of its children without using
height: inherit;
I dont want to write individually to all children this property.
if you use a css precompiler you can save the height of the container to a variable and then define it for the specific child container as its individual Height. Your Question is not very clear because you don't describe how your child-container are positioned in the parent container
Related
If I have a div element with CSS height set to auto, and all its content height was set to percentage values, then where does the contents of that div based their reference for the height?
Ordinarily, the contents set their height as if they were set to "auto" rather than percentage values.
See under "<percentage>" at http://www.w3.org/TR/CSS2/visudet.html#the-height-property for the full details.
i think inherited css attribute will be based on their direct parent container.
just as a position:absolute element's top,bottom,left,right value will be based on its' direct parent container , instead of root container.
I have a parent element with some child elements. The child elements have a min-width set, but the parent does not. When the browser window is smaller than the min-width, the child elements are the correct width, but the parent keeps getting smaller, causing the children to overflow. Is it possible to force the parent to be at least as wide as the children? (without using javascript)
http://jsfiddle.net/Psczr/
(drag divider most of the way to the right and then scroll right in the result window)
Set the min-width on the parent and on the child inherit ... but the parent of the td in your script is not the div but the tr ... the parent of the tr is the table ... and the parent of the table is the div.
http://jsfiddle.net/Psczr/12/
Your issue in this situation is that you're using a relative width for the parent and a fixed min width for the children. The solution you're trying to handle is not possible in straight CSS. You should instead use relative widths for all elements or establish a fixed min width for the parent.
I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/
Do you know if I can choose the element which should be used to define relative height for other one?
The height by default will be relatively defined by its parent. Meaning that a nested div with height: 100px; will only ever be as high as the div it is inside of (not accounting for margins/padding).
You can use jQuery to set heights based on other elements.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks