Skip to content Skip to sidebar Skip to footer
Home / Css / Height / Html

How Do You Make A Fluid Wrapping Divider Height?

Post a Comment
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 30

Solution 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/


Solution 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.


Post a Comment for "How Do You Make A Fluid Wrapping Divider Height?"