All geek questions in one place

Scroll bar on overflow div: auto and percentage height

Is it possible to create a div that adjusts to the size of the browser and also scrolls. I want to use overflow: auto on a div and a percentage height of 90%.

Page structure

<body style="height:100%"> <div id=header style="height:100%">headerinfo</div> <div id=content style="height:100%;overflow:auto">content which is replaced dynamically</div> </body>

Will there be an overflow: automatic operation without a known px height somewhere in the hierarchy?

+6
source share
1 answer

In response to your question, yes, overflow:auto will work, but you will also need height: 100% in the HTML tag:

 html,body { height:100%; margin: 0; } #header { height: 100%; } #content { height: 100%; overflow: auto; }

The way you structure your layout will cause the two divs to have the same height as the viewport, on top of the other. Is that what you intended?

If so, this is jsFiddle, which illustrates your example. I changed the markup and added additional content so that the div content overflows as needed.

http://jsfiddle.net/chrissp26/WsNjm/

+7
source

Source: https://habr.com/ru/post/947084/

More articles:


All Articles