I'm trying to produce a layout where I have a div with a percentage height of the body. In addition, I also want to limit this height using max-height.
Inside the parent, I want to create some columns that have further sub-elements, all of which fit within the height (or max-height) of the parent.
Please see this example: http://jsfiddle.net/k6rfr/2/
The problem is that the child elements (with a height of 50% each), match the height of the parent and not the max-height.
Is there any way to make the child elements match the max-height instead of the height?
Though this is not exactly what you might need, it solves your problem:
http://jsfiddle.net/k6rfr/3/
I placed the max-height directy in the child-elements omiting the second wrapper element. The problem you have here is that you have to define the height in two different places.
I think the error is that a given block "outer" height of 60% may not correspond to what you wrote after 300px. It's not correct. If you remove a specified percentage of the height, the blocks would fall into place. Or enter the correct proportion height and max-height.
Related
We have created Cards which can be resized and moved around by the user. In some of these Cards, we want to embed a Datagrid which is supposed to "fill" the available space (e.g. a card-block).
I am able to control the width, but haven't found a way to control the height in my scenario. Here, the Datagrid grows way outside my Card, even pushing down the card-footer.
Here is a StackBlitz example which shows the behavior.
BTW, the trick with "height: 100%" doesn't seem to work in my scenario.
Any help would be appreciated.
As mentioned in my comment, to use height: 100% you need the parent to have a defined height. Except in your case, it's all dynamic up to the card itself, so you have to propagate that height: 100% down to the datagrid. I updated your plunker with this, and it works fine now: https://stackblitz.com/edit/fit-datagrid-in-card
See https://drafts.csswg.org/css2/visudet.html#propdef-height for the height explanation:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.
You are correct that setting the height to a percentage does not seem to restrict it to the card-block itself, but setting to absolute pixels does.
I see in your Stackblitz that you tried to set the height to 300px, but that is still beyond the size of the hosting element. The card itself is set to 400px x 400px, but once rendered, the card-block (where the datagrid is placed) is only 398px x 281px.
Please have a look at this Stackblitz where I set the height of the datagrid to 240px.
In CSS, if I set the width attribute to 100%, like so:
width: 100%;
If the width of the document is larger than the width of the window (horizontal scrolling), the width of the element is only the width of the window. If I scroll to the right, it gets cut off immediately.
How can I use CSS to set the width of the element to have a min-width of the document width so it doesn't get cut off when scrolling?
Percentage based width is dependent on the width of the parent element. So if you set width 50%, it will be 50% of the parent container. Therefore you need to ensure that all the parent elements are properly sized.
There may be a solution using absolutely positioned elements. However this depends on the position attributes of the parents as well.
There is no construct to get the "document width" on a page (in pure css). You are constrained by parent elements in nearly any case.
However a solution may be achieved with Javascript.
I would suggest you investigate the size of the chain of parent elements with Firebug or another browser debugger.
I'm trying to animate an accordion-style list, but not matter what percentage I give to the child, it shows up completely (even at 0%). See this JSBin--if you change the "0%" to "0" (or "0px"), it hides just fine, but at 0% (or 1%, or 50%, or 100%, etc.) the child is fully visible. The percentages only seem to work if you give the parent <li> an explicit pixel height (but that doesn't play very well with animating the expand of the child).
I can understand how percentage heights might behave funny when the parent height is not specified, but 0% should be 0px all the time. That's what I don't understand.
According to the CSS specification:
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
if a child element has a percentage height, and the height of its containing block is not explicitly set, then the child elment's height computes to auto, not 0px.
Note that if the child element in question is positioned absolute, other CSS rules come into play.
The height in percentage sets the height according to the height of the parent. If the parent height is not set, you need to specify the height of the parent.
documentation says
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to auto. A percentage height on the root element is relative
to the initial containing block.
So 0% height goes to height:auto; in this case.
Usually if we specify margin-top:10%;/*(say for eg.)*/
then margin-top will be 10% of pages width, but i want 10% of pages height.
You can't, a margin percentage will always be in terms of the width of the containing element. That's how it's defined and that's how it should work. The only flexible margin you can use for top and bottom is the auto value which will let the browser automatically calculate what the top and/or bottom margin should be. There's no way to make that percentage apply to the height of the element. The padding-top declaration works in the same way concerning percentages.
You'll probably have to add an extra division of some sort above it that has a height with the percentage of 'margin' you want to be there. Not sure how well this would work out though.
I am working on a layout consisting of several nested Divs and I am ideally looking to get the content areas to stretch the height of the screen. This is pretty simple and I have done it in the past but not in this type of layout and am struggling with it. Instead of me pasting all of the code, I uploaded it to server that can be previewed.
http://www.danyuschick.com/theembalmed/
Any help would be great. I'm at my wit's end with this right now.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
< percentage >
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
So whenever you use percentages as height the containing block of the element must have an explicit height to be considered.
Look at this link:
http://ninja-code.net/extra/stackoverflow_test.php
It uses a lot less DIV and will expand as you fill content. It also keeps your images as borders along the 'conent' - I wasn't sure if you were wanting it to repeat.
I didn't want to hassle with pushing the footer to the bottom though.