0

I've been trying to create a dynamic sized web-design for the past few hours, but with no luck.

Here's a picture of what I am trying to do:

enter image description here

Basically, I have a header (at top) and footer (at bottom) with set heights. I want two divs between them, a menu and content area, that are dynamically sized between the header and footer (height-wise). When I resize the website, I want the menu and content are to resize as well so they still fit. If the content inside the content area or menu are is higher than the actual div, the scrollbars will appear (overflow: auto).

Can anyone help me?

Thanks

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Foob
  • 1
  • 1
  • 4
    I would recommend against having multiple scrollable regions if it can be avoided. Is there a reason you need two scrollable regions? – zzzzBov Apr 04 '11 at 20:49
  • there's no way to set the height of the scrolling div's with CSS only to keep it 'stretching' vertically. You'd have to use JS to get the height of the viewport on page resize, minus your header and footer, then set the height of your divs with that. – DA. Apr 04 '11 at 20:49
  • @zzzzBov: Yeah, although can't really go in details. – Foob Apr 04 '11 at 20:52
  • @DA: I see. Any tips on how to do it with javascript? – Foob Apr 04 '11 at 20:53
  • this question should get you pointed in the right direction: http://stackoverflow.com/questions/838137/jquery-change-height-based-on-browser-size-resize – DA. Apr 04 '11 at 20:56

4 Answers4

3

My go-to for multi-column layouts: Ultimate multi-column liquid layouts.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • Hmm, not exactly what I need. I am trying to make the design the exactly same size as the window... if that makes sense. Basically, the container: width: 100%; height: 100%; overflow: none; – Foob Apr 04 '11 at 20:50
1

I recommend you to use Bootstrap(http://getbootstrap.com/getting-started/). If you search under Examples you surely find something that matches your needs.

Otherwise you find predefined classes under CSS and JavaScript. All elements in bootstrap are responsive und resize with the size of the screen/browser window. Below you can see an example in code.

  <body>
<!--[if lte IE 8]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="header">
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#/">Template App</a>
      </div>

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li class="active"><a href="#/">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#/data">Table</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
<div ng-view=""></div>
</div>

<div class="footer">
  <div class="container">
    <p>Footer</p>
  </div>
</div>
Burnthor
  • 21
  • 8
0

I guess you don't want to use a table but this seems to be the easiest way to achieve what you want, with iframes in the left and right columns.

However you can also use divs with position:absolute since you already have the height of the header and the width of the left column as absolute. Simply offset the right column div by the number of pixels from the top and left accordingly.

Don Clayton
  • 11
-2

To get scroll bars on both the left and right panels, I think the easiest way is to use frames. Frames are a pain (or a pane ...), but they do give painless scroll bars.

Jay
  • 26,876
  • 10
  • 61
  • 112