问题
my friend did this but he wont tell me how he did it, but
I want my wrapper divider to have a fluid height.
So it should have an exact margin from the top and from the bottom at 30px, and then the wrapper itself can expand related to the browser height, but it will always be a specific distance from the top and bottom of the browser.
And is it also possible to make a minimum height so it doesn't get squished too much, and becomes a scrollable page?
回答1:
Your divider should have the following properties. This will give it a 30px top and bottom margin and it will adjust with your window height.
.divider{
position:absolute;
top:30px;
bottom:30px;
}
Check working example at http://jsfiddle.net/zkebs/
回答2:
One simple way is to put some padding on <body> to simulate a margin on your <div> and then make your <div> 100% height:
<html>
<body style="padding: 50px;">
<div style="background: #eee; height: 100%;">
Where is pancake house?
</div>
</body>
</html>
Block elements are full width by default so you don't have to worry about that part. The background color is just for illustrative purposes.
You can use min-height: 100px; overflow-y: auto; if you want to limit the height and get a scrollbar when necessary.
来源：https://stackoverflow.com/questions/5616231/how-do-you-make-a-fluid-wrapping-divider-height