I need my container div to expand in height to at least the full window height. If there is a lot of content inside the container div, I want it to exceed the window's height. This feature is working properly.
Within the container div, I have placed an image followed by a second nested div below it. My goal is to make this nested div stretch vertically to occupy the remaining space within the container div. Unfortunately, this aspect is not functioning as expected.
To visualize the issue, you can refer to this illustration. Ideally, I want the div to expand like the left side of the example on the right image, rather than how it appears on the right side of the same image.
Below is the code snippet that demonstrates my attempts so far. As shown here, I haven't been successful in making the div under the image expand vertically, despite trying different methods. Setting "Height: 100%" did not yield the desired outcome, especially since I have defined "100%" to represent the default window height to ensure the container div stretches accordingly.
* {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.container {
display: block;
overflow: auto;
min-height: 100%;
height: 100%;
height: auto;
}
.bottom {
width: 100%;
}<div class="container">
<img src="image.jpg" width="100%">
<div class="bottom">
LOREM IPSUM
</div>
</div>