samedi 25 juin 2016
limit child's height to what is left within parent
I am trying to split the height of the viewport between two divs. Within the top div, I have a small div and then a larger div that I want to scroll if it does not fit within what's left of the parent div. Here's the structure of my HTML and CSS (a longer example with more stuff in the divs is in the linked JSFiddle).
<body>
<div class="half-col" style="background: lightgreen;">
<div style="border:solid 1px;">
<span>Small amount of stuff</span>
</div>
<div class="y-scroll" style="border:solid 1px;">
<span>Large amount of stuff ...</span>
</div>
</div>
<div class="half-col" style="background: blue;"> </div>
</body>
I am using the following CSS styles:
div.half-col {
height: 50vh;
}
div.y-scroll {
overflow: auto;
height: inherit;
}
height: inherit is limiting the second sub-div (the one with the "Large Amount of stuff") to the total height of the lightgreen parent div. Which (in the jsfiddle) still causes it to scroll since even that is not enough space. But what I really want is to limit the height of that div to the height of the parent div minus what has already been used up by the divs above it. (In my actual use case there is more than one div above it, each only requiring a small amount of vertical space that will never overflow the parent.) What is the right way to limit the height of a div to the space that is "leftover" in the parent?
JSFiddle:
https://jsfiddle.net/pj056n0n/3/
(this is my first time using JSFiddle -- sorry if I did it wrong)
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire