My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve:
https://i.stack.imgur.com/rJVvJ.png
The issue arises when the viewport height is shorter, as the button ends up covering the content. Here's an example of the problem:
https://i.stack.imgur.com/5dU4V.png
I want the button to remain at the bottom of the content when the viewport is less than the combined width of the button and the content. If I remove the bottom:0 property from the button, it resolves the issue but then the button doesn't stick to the bottom of the viewport for larger viewports:
https://i.stack.imgur.com/XH2ss.png
To ensure the button spans the entire width of both the viewport and its parent element, I have positioned the button absolutely and left the parent element unpositioned. This also prevents me from using flexbox to solve the problem.
Is there a CSS-only solution to achieving this layout, or will I need to resort to using JavaScript?
body {
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
.child {
background: lightblue;
text-align: center;
}
.parent {
overflow: scroll;
border: 1px solid red;
height: 100%;
margin: 0 30px;
}
button {
border: 1px solid green;
background: blue;
color: white;
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
}
Here is the structure of the parent and child elements in the HTML:
<div class="parent">
<div class="child">
<!-- Content here -->
</div>
<button>button</button>
</div>