CODEWITHSUNDEEP
htmlcss
Foob
Foob

Reputation: 1

Dynamic sized web design

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

Upvotes: 0

Views: 2433

Answers (4)

Burnthor
Burnthor

Reputation: 21

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>

Upvotes: 1

Don Clayton
Don Clayton

Reputation: 11

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.

Upvotes: 0

Jay
Jay

Reputation: 27482

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.

Upvotes: -2

Matt Ball
Matt Ball

Reputation: 359856

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

Upvotes: 3

Related Questions