Introduction
I have children containers inside a parent div
The parent div is fixed-height (750px)
Currently, the children are fixed-height too
One of these children, the second div of a div inside a table (yeah…), can/often go beyond its height, adding a vertical scrollbar, which is fine; this child has a defined height of 600px. We’ll call it main child
The sum of these heights are below the parent height, which can create an undesired white space, when the 600px-child content is less than or equal to these 600px
Template
I have built a simplified template to ease visualization and manipulation
The parent div is outlined with red
The inner, framework-generated (1) table is outlined with purple
The undesired space can be seen between the table bottom and the parent bottom
<!DOCTYPE html>
<html>
<style>
div {
display: block;
unicode-bidi: isolate;
}
tr {
outline: 1px solid purple; /* Addition for demo */
}
.container {
height: 750px; /* Fixed */
left: 304px; /* CollapsiblePanel 300 + vLine 4 ... */
outline: 1px solid red; /* Addition for demo */
position: absolute;
}
.title {
color: #BC1212;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
}
.tabs {
background-color: darkseagreen; /* Addition for demo */
height: 33px;
position: relative;
white-space: no-wrap;
width: 100%;
}
.content {
background-color: lightblue; /* Addition for demo */
height: 600px; /* To be turned into a min height */
overflow: auto;
position: relative;
}
.hLine {
border-bottom: 1px solid #888;
height: 1px;
overflow: hidden;
position: relative;
width: 100%;
}
.CollapsibleContainer {
height: 750px; /* Fixed */
position: relative;
}
.CollapsiblePanel {
background-color: AliceBlue;
line-height: 750px; /* Addition for demo */
position: absolute;
text-align: center; /* Addition for demo */
vertical-align: middle; /* Addition for demo */
width: 300px;
}
.vLine {
border-left: 1px solid #888;
height: 100%;
left: 300px;
overflow: hidden;
position: absolute;
width: 4px; /* Fixed */
}
</style>
<div>
<table class="tabs"><tr><td>Tabs</td></tr></table>
<span>
<div class="CollapsibleContainer">
<div class="CollapsiblePanel">Collapsible Panel</div>
<div class="vLine"></div>
<div class="container">
<table width="100%">
<tr><td><label class="title">Title</label></td></tr>
<tr><td>
<div>
<div class="tabs">Tabs</div>
<div class="content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
</div>
<div class="hLine"></div>
</div>
</td></tr>
<tr><td><input type="button" value="Action" style="display: block; margin-left: auto; margin-right: 0;"/></td></tr>
</table>
</div>
</div>
</span>
</html>
Goals
- Change the fixed-height of 600px to be a
min-heightfor themain child, and have it fill the white space - Keep all the containers inside the fixed-size parent div, so when the sum of the children heights goes beyond the 750px of the parent, they’re all inside it, with the
main childhaving a vertical scrollbar accordingly - Remark 1: Since this above means to make the 600px-height
main childdiv to fill the white space, this will result in the other children containers to stay at the bottom of the parent div at all times, which is great - Remark 2: Depending on the size of the screen, the bottom can be out-of-sight, but reachable by a general vertical scrollbar added by the web browser; the bottom child div is not supposed to be visible at all times (I think that’s a floating behaviour, and this is not what is expected). This is perhaps something due to the used framework (1) (or Windows?), but the website does not look the same on 1920×1080 external screen device and on 1920×1080 laptop screen device; just to be perfectly clear (I hope)
Issue
I can’t get the elements below the main one to stay inside the parent div: the main one pushes the others out-of-parent-bounds
Constraints
(1) The application is built upon an internal, old, unmaintained, legacy framework, on which I have from little to no control over: the generated HTML can’t be modified…
Only the CSS seems to be manipulable
The 750px height of the parent div has to stay, which means the parent height is known at all times
Extra-information
I have omitted/removed a lot of intermediary div/span containers, so the excerpt is clear and (I hope) easy to manipulate
I believe I’ve kept the minimal/necessary HTML/CSS bits to reproduce/show the issue, mainly the imbrication of the various containers (div, table)
I’ll handle the extra complex container hierarchy on my end when solution(s) will be shared ^^
Setting a height of 100% on the table moves and splits the extra-blank space above and below the main child div, couldn’t get anything better past this
I think at 1 point I had the main child div to have its bottom at the parent bottom… but lost that attempt
I have tried several things from SO and other websites without much success: there’s a lot of simple examples of keeping children containers inside parent div, but I’m unable to translate these to my case (probably just bad at it)
The section with a button can have more components (e. g. 2 lines of buttons); so the container is not fixed-height (but probably has a min-height somewhere, and if not, I’ll give it one)
I hope this is clear as to what the issue is and what is expected, and that the given information is well-ordered and useful ^^”
If you need anything other piece of information, let me know