Let's say I've two sibling elements A and B. I want to set B's height fixed to (container's height - A's height). So, child elements of B won't increase the height of B.
I've tried using Height: 100%;, but it is taking container's height, not (container's height - A's height)
Sample angular app:
https://stackblitz.com/edit/angular-ivopeh
B's height should be fixed to (container's height - A's height) = (50px -30px) = 20px. So, if child element of B has height more then 20px, it should restrict its height to 20px and add scrollbar to it
I Would place this as a comment if I could.
To add a scrollbar to section b if the children are bigger than 20px you could overflow-y:scroll on section b(more documentation on overflow below). this way you only have to take care of the height which could be solved by adding flexbox or fixed values.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
if A has a fixed height then changing class B as follows should do it;
.B {
display: block;
height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
overflow-y: auto;
}
display: block; is required for any height value set on B to be effective.
overflow-y: auto is required to display scroll bars in case B's content overflows.
here is a working demo: https://stackblitz.com/edit/angular-mw3ugb
Related
There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?
It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?
Yes:
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.
The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.
Obviously use a relevant selector for your use-case.
References:
calc().
CSS lengths.
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.
Please, have a look at http://jsfiddle.net/g995s/.
<div id="textarea_wrapper">
<textarea>How and where my width is derived from?</textarea>
</div>
#textarea_wrapper{
height: 250px;
border:thick solid green;
}
textarea{
background-color: #930;
border:none;
margin:0;
width:auto;
resize:none;
overflow:hidden;
height:95%;
padding-top:5%;
}
It is impossible to me to explain two things: The first one is why textarea goes outside its parent since height+padding-top=100%?
The second one is how and from where this certain width of textarea is derived?
Thank you
In regards to the first issue, the percentage based padding-top value is relative to the width, not the height, therefore the positioning won't be consistent if the width of the browser is changed - try resizing the window to see this.
8 Box model - 8.4 Padding properties
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
The padding-top percentage is based of the width of the parent element, not the height.
So it goes outside because 95% of the smaller height + 5% of the larger width = more than 100% of the height.
The width is the default width for the textarea because setting width: auto on textareas does nothing.
Set the textarea width and height to 100% and use a fixed measurement like px or em for the padding if you don't like how the top and bottom percentages work.
Then use box-sizing: border-box on the textarea to make its width, height and padding stay within 100% of its parent; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Its the padding-top that is increasing the size of the text area
*edit: beaten to it! :)
I know it's possible to setup the block width 100% and it will extend the screen horizontally, as in the snippet code below. But, why doesn't it work for the height?
.block1{
width:100%;
float:left;
background-color:yellow;
}
The above block goes into the container, which was used overflow:hidden; but it didn't help. Is there a way to setup the block height to 100%?
From the spec of height:
<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'.
If not, the height of an element with height: 100% would depend on its parent's height, and if its parent's height depends on content's height (height: auto), it would be a circular definition.
First of all, it is not 100% of the screen width, it's 100% of the parent element's width (which, in your case, is probably the same width as the screen).
You cannot do height: 100% because the browser doesn't know how high the parent element is. It's impossible to calculate, so it ends up being ignored by the browser.
You need to use javascript to find out how tall the screen is.
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
I've read through tons of questions and articles and I can't seem to figure this out.
Here's a rough example of my layout structure:
body
- div 1 (header)
- div 2 (main content wrapper)
- - div 2a
- - - div 2a1
- - - div 2a2
- - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)
- - - div 2a3
- - div 2b
- div 3 (footer)
I believe my main problem stems from the fact that all the child elements of 2a are floated left.
All the answers I've found talk about adding 100% height the parent containers, including the html and body tags. But I can't just go through and add height: 100%; to all every ascending parent because it ends up breaking my layout. Specifically so, when I add height 100% to my main content wrapper, div 2.
Here's a jsfiddle I made that represents my problem quite well.
Percentage heights are calculated from the parent element, pixel heights aren't. That means you would need to set height on each level ONLY if all of the heights need to be in percentage.
You can set min-height on 2a2 with a pixel value, so it won't get any smaller than that, but it will able to expand beyond that value. And then you set height: 100% on 2a2a. This will work because the parent element(2a2) has an absolute value in px.
Edit:
To make the 3 divs fill the rest of the container regardless of the content, you have to use the padding-bottom, margin-bottom trick. Here's the codepen.
Just set the 2a2's position: relative and the 2a2a's position: absolute. You can then add top: 0; bottom: 0; and the 2a2a gets stretched to the full height of its parent.
a jsFiddle is always helpful: http://jsfiddle.net/REh4b/