CODEWITHSUNDEEP
csshtmlheight
Ninjiangstar
Ninjiangstar

Reputation: 225

How do you make a fluid wrapping divider height?

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?

Upvotes: 0

Views: 1314

Answers (2)

mu is too short
mu is too short

Reputation: 434685

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.

Upvotes: 0

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 1

Related Questions