收录日期:2019/05/24 23:38:53 时间:2009-07-29 18:38:48 标签:javascript,jquery,html,css

We are creating a web page with header, content and footer. The header and footer should be visible at all time and the content should be scrollable. The container div has a fixed width but no fixed height. I solved the problem of keeping the footer at the end by using css sticky footer (http://ryanfait.com/sticky-footer/) The content area is divided into two parts (content1 and content2) and has a flexible scrollable div.

The problem is, the height of the content area is not absolutely defined (i.e. 100%). We would like that when the data in either content1 or content2 exceeds the screen size that it automatically overflows into its own independent scrollable bar and the header and footer remain visible.

We would like to avoid using iframe. Is there any way, we can do it with javascript (jquery or others)? We are highly inspired from goole docs home page.

Any help would be highly appreciated.

Choesang :)

Hey Choesang, redsquare, here is another way you can do it without putting anything off the screen.

First find the height of the viewport that you have to work with, we'll call this 'viewportHeight'. If the content of your header and footer are already set, they will have a height. Calculate their heights and add them together, we will call this 'usedHeight'. The height you have left in which to put the contents is: remainingHeight = viewportHeight - usedHeight;

If you set the css property on your content container to be height=remainingHeight and overflow-y = auto, your content will always take up at least the minimum content height, and if there is too much content it will force a scroll bar to appear.

We are going to use the Prototype library to help us, but we could just as easily use jQuery or even write the code to calculate the heights ourselves.

Notice in the body I am setting the height to 100%, as well as the padding to 0, and the margin to 0. Most browsers put a 10px padding around the body and this will cause your footer to show up off the screen in the process I am showing.

<html>
<head>
<script type='text/javascript' src='prototype.js'></script>
</head>
<body style='height: 100%; padding: 0; margin: 0;'>
<div>
  <div id='header'>header text</div>
  <div id='content'>content text</div>
  <div id='footer'>footer text</div>
</div>
<script type='text/javascript'>
   // Here we will set the text of the content, calculate its height, 
   //  and set the max height.  In production I would use less lines, 
   //  for here writing each step out for clarity.
   var viewportHeight = document.viewport.getHeight();
   var headerHeight = $('header').getHeight();
   var footerHeight = $('footer').getHeight();
   var usedHeight = headerHeight + footerHeight;
   var remainingHeight = viewportHeight - usedHeight;

   // we have our remaining height, now set the style.
   $('content').setStyle({
     'height': remainingHeight,
     'overflow-y': 'auto'
   });

</script>
</body>
</html>

Before you show the content you could append it to a div that is positioned off screen. Then take the height of the content and work out depending on the size of the clients viewport if it needs to be scrollable. Then take the content out of the off screen div and append to your main div with the height specified for the viewport and overflow:auto.

Problem creating a scrollable content area with height defined in percentage Variable height header with scrollable content area filling remaining viewport area CSS Flexible Height with scrollable content Image doesn't render when width and height are defined in percentage with parent elementHeight in percentage problem in HTMLDynamically Rendering in a Scrollable AreaScrollable Content With Javascript in a Div with overflow:hiddenCSS: 100% height content area with variable-height headerSilverlight Scrollable Content ProblemHTML element percentage height problemScreen with fixed headers and scrollable area in iPhoneCreating a percentage type in C#Vertically align text inside an element with a percentage height?Problem with scrollablejQuery DatePicker does not move with HTML content when in a scrollable divCustom UITableViewCell with height defined in UITableViewSWT: scrollable area within a tabUIWebView content with scrollable iframe