dynamic height scrollable div
Ideally using CSS only I want a scollable div that is dynamic in height.
Mockup of layout...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.page {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.top{
height: 100px; background-color: Gray;
}
.middle {
height: 150px; background-color: Green;
}
.bottom {
overflow: auto;
}
</style>
</head>
<body>
<div class="page">
<div class="top">
top
</div>
<div class="middle">
second
</div>
<div class="bottom">
This one I want to be dynamic in height (stretch from here to the bottom of the window). <br />
And scroll if the content if its bigger than the height allowed in the window.
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line<开发者_StackOverflow中文版;/p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
<p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
</div>
</div>
</body>
</html>
.bottom is the div i want to stretch to the bottom of the browser...then scroll if need be.
--UPDATE: whipped up this bit of javascript which does a pretty good job ... but would like a purely css solution really??
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
SetScrollableDivHeight($(".bottom"));
});
$(window).resize(function () {
SetScrollableDivHeight($(".bottom"));
});
function SetScrollableDivHeight(div) {
var top = div.position().top;
var windowH = $(document).height();
var remaining = windowH - top;
div.height(remaining - 25);
}
</script>
Per the code above:
.page { ... height:100%;... }
.bottom { height:100%; overflow:auto; }
As long as it's parent has a height property .bottom will expand only to the height of its parent. That also applies to .page.
Just set the size you want to your div and then you must add the overflow: auto css style.
For example, add the scrollable class to your div and add the following style to your css :
.scrollable {
overflow: auto;
}
As soon as the content of your div is too big your its size, scrollbars will appear. You can force the scrollbar appearance with others value than auto, see : http://www.w3schools.com/css/pr_pos_overflow.asp
You can use the following common pattern to solve your issue.
Put blocks in a flex container (display: flex) that takes the full page height (height: 100vh) and displays items vertically (flex-direction: column).
Add overflow-y: auto to the block you want to make scrollable.
Here is a code snippet. If you put long content into main (longer than page's height), the block gets a scroll.
body {
overflow-y: hidden;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
padding: 20px;
background: #FFECD1;
}
.main {
padding: 20px;
background: #FFD195;
overflow-y: auto;
}<body>
<div class="container">
<div class="header">Lorem ipsum...</div>
<div class="main">
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>
</body>Extra tips
In the example above, the scrollable block (main) takes as much height as it needs depending on the size of content. Do you want the scrollable div to take all the available space even if it has not enough content? Then add the css property
flex-grow: 1;to it.You can use this pattern on any level of your html tree. If you apply it to a nested container, set height to 100% instead of 100vh. 100vh means that it will take the height of the screen and works for the whole page level. But you will need the actual height of the parent container.
加载中,请稍侯......
精彩评论