In my project, I am facing a challenge in placing a <div> with a fixed height of 100px and full width (100% of the parent <td>) at the bottom of a <td>. The issue is that the content of the other <td>s may be larger than the browser's viewport height.
I have tried various solutions from resources like this, but they place the div at the bottom of the browser's viewport, not the actual <td>.
Edit: The current method I attempted, as per the provided link, was unsuccessful:
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
I am seeking an option using PHP, HTML, CSS or JavaScript (including jQuery) to correctly fix a <div> to the bottom of a <td>, taking into account the <td>'s total width.
Edit 3:
Another issue arises when implementing the above solution - setting position: absolute; causes the width: 100%; to refer to the viewport width rather than the <td> width.
Edit 4: Here is the relevant code snippet from my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
Link to jsFiddle for reference: Source