I am trying to place a div at the bottom of the page in my Sphinx doc project for displaying some information in it.
To achieve this I have done the following:
.cls_parent_text {
left: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
background-color: #c7eae4;
color: red;
}
.cls_mid_sec {
left: 0;
margin-top: 20px;
height: 20px;
font-style: italic;
background-color: #74992e;
color: black;
}
.cls_ribbon_with_info {
left: 0;
right: 0;
margin-top: 30px;
bottom: 0;
height: 18px;
width: 100%;
position: relative;
/* Some other stuff like */
background-color: #0A507A;
color: #ffffff;
/* others */
}<div contentEditable class="document">
<div id="id_div_parent" class="cls_parent_text">
<p>A veritable treasure trove can be found here</p>
Some more text
<br>
Additional text
</div>
</div>
<div class="footer">
<div id="id_div_mid_sec" class="cls_mid_sec">
Let's display some other text!
</div>
<div id="id_div_ribbon" class="cls_ribbon_with_info">
<span>Lorem, little foo, more bar and sprinkle other non-sensical blah!</span>
</div>
</div>Issues being faced
The above described arrangement works fine so long as the page contains sufficient amount of text to ensure that the container overflows to render the vertical scroll bar (image below).
However, if there are not much text to display in a particular page, the ribbon stops at a point where there is a gap between the ribbon and the actual bottom of the page (image below – the gap below the ribbon).
Edited to add two more sections, probably not really able demonstrate the situation here, but, if the main section cls_parent_text has less content, the last section, cls_ribbon_with_info gets pushed up away from the bottom.
What am I doing wrong here? Is there a way to tweak the scenario to have the ribbon at the bottom always, notwithstanding the amount of text in a page?
11