Home/ Questions/Q 3360110
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:57:13+00:00

I need the following layout for a webapp: +———————————————+ | header | +——————————————-+-+ |

  • 0

I need the following layout for a webapp:

+---------------------------------------------+
|                   header                    |
+-------------------------------------------+-+
|                                           |#|
|                   content                 | |
|                                           |#|
+-------------------------------------------+-+
|                   footer                    |
+---------------------------------------------+

Header/footer should always be at the top/bottom of the browser page. They do not have a fixed height.

Content should fill the available space and optionally get a scrollbar (indicated by #). The scrollbar should not cover the whole window.

I need this to work in IE>=7, Chrome and Firefox.

So far I tried different divs and tables but they all failed because I can’t get content to exactly fill the available space.

Updated:
The height of header and footer should be determined by their own content (e.g. header might include a menu, footer a notification set by javascript).

Added sample:

This should show what I am trying to do. The problem is (apart from not working 🙂 ) is that the height of the ‘outer’ div is greater than the window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
  <script src="../lib/jquery-1.4.2.min.js" type="text/javascript"></script>
  <style type="text/css">
    .header { width: 100%; background-color: red; }
    .footer { width: 100%; background-color: blue; }    
    .content { overflow: auto; height: 100%; }
  </style>
    <script type="text/javascript">

      $(function ()
      {
        $("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
        $("#toggle").click(function () { $("#text").toggle(); });
      });

  </script>
</head>
<body style="height: 100%">
  <div id="outer" style="height: 100%">
    <div class="header">
      header <a id="grow" href="#">grow</a>
    </div>
    <div class="content">
      <h3>
        Lorem:</h3>
      <p>
        <a id="toggle" href="#">toggle</a>
      </p>
      <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus
        sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim.
      </p>
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the end I had to use Javascript in combination with the resize event:

    <html>
<head>
  <script type="text/javascript" src="~/Scripts/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
    $(function ()
    {
      var resize=function () { $(".dynamic-y").each(function (i, x) { $(x).height($(window).height()-$(".footer").outerHeight()-$(x).offset().top); }); };
      $(window).resize(resize);
      resize();
    });
  </script>
</head>
<body>
  <div class="header">
    ...
  </div>
  <div class="page dynamic-y">
    ...
  </div>
  <div class="footer">
    ...
  </div>
</body>
</html>
    • 0