如何创建具有百分比高度的固定的可滚动div？

Question

I am trying to create a fixed div in the middle of a page that is scrollable, but I'm not able to get the div to scale to the page size properly. It's set to take 70% of the page (AKA, stopping around 20px from the bottom of the browser) but when you make the height of the browser less, it doesn't seem to react properly.

I can't seem to figure out why this is, suspect it's related to fixed positioning a div and then attempting to use a percentage height but I am sure there is a way around it.

To see what I mean, there is an example website here for this. Drag the window up from the bottom and eventually the div does not resize anymore. :(

The CSS for the div is:

.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}

And the structure of the HTML is:

<div class="container">
    <div class="container">
     [This is the fixed width box I want to size]
    </div>
</div>

One idea I had was to use javascript to determine the height of the browser dynamically and set the fixed with to a specific pixel height but I doubt that's the best way to solve this.

Answer 1

Your page is calculating the height of the .singlepost div correctly. It is always 70% and it is adjusting when the page height gets smaller.

The problem is the .singlepost div sits after some content that is a fixed height. So when the content above the .singlepost div is greater than 30% of the page height, the .singlepost div does not exceed the bottom of the page. But when you make the page height smaller, the top content gets less than 30% of the page, and at that point the bottom of the .singlepost div will drop under the bottom of the page.

Rather than setting the height, you can set the top and bottom:

CSS

.singlepost {
    position: fixed;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
    top: 270px;
    bottom: 20px;
}

This assumes that your top content is 270px high.