Menu
Is it possible to create a div that adjusts to the size of the browser and is also scrollable?
I want to use overflow:auto on the div and percentage height of 90%.
The structure of the page is
<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 overflow:auto work without a known px height somewhere in the hierarchy?
479
Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;.
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
We can use a combination of overflow-x and overflow-y to place the scrollbar vertically, horizontally, or both. For the vertical scrollbar, overflow-x:hidden and overflow-y:auto will be set in the CSS file, and vice versa for the horizontal scrollbar.
How can I change the width, height and color of scrollbar used on DIV element ? You can create a custom scrollbar with specific width, height or colors by using the solution below. To apply the style for the DIV scrollbar, you can link the CSS with DIV element by class name.
For a scrollable bar, use the x and y-axis. Set the overflow-x: hidden; and overflow-y: auto; to automatically hide the horizontal scrollbar and show a vertical scrollbar. Let’s see an example, where the <div> is vertically scrollable. Place the <h2> tag. Write some content in it.
E.g., overflow: auto; and an axis hiding procedure like overflow-x: hidden; and overflow-y: auto; will make a bar scrollable vertically and horizontally, and the "auto" value will add only a vertically scrollable bar. For a scrollable bar, use the x and y-axis.
Use the overflow-y property to specify whether the content must be hidden, visible or scrolling vertically when the content overflows the element’s top and bottom edges. Set the "auto" value.
In answer to your question, yes overflow:auto will work, but you will need height: 100% on the HTML tag as well:
html,body {
height:100%;
margin: 0;
}
#header {
height: 100%;
}
#content {
height: 100%;
overflow: auto;
}
The way your markup is structured though will produce two divs both the same height as the viewport one on top of the other. Is that what you intended?
If so here is a jsFiddle that illustrates your example. I've tweaked the markup and added additional content so that the content div overflows as you require.
http://jsfiddle.net/chrissp26/WsNjm/
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
