CODEWITHSUNDEEP
htmlcsslayout
oliverbj
oliverbj

Reputation: 6052

Creating a basic design with 100% height

I am trying to obtain this design:

enter image description here

I just have no idea how to start on this. It doesn't make sense in my head on how I can obtain this.

Can someone help me? Maybe do a quick jsFiddle, just with the basics. I want to learn how I can make layouts like this, where the left menu bar's bg (or just height) is the same as "DIV#2"' content.

Update:

I tried @Josh Davies answer like this:

 <div class="container">
    <div class="row">
        <div id="wrapper">
            <div class="leftt">left content</div>
            <div class="rightt">right content</div>
        </div>
    </div>
 </div><!-- end container -->

   #wrapper{background-color:blue;width:100%;}
   .leftt{float:left;width:29%;}
   .rightt{float:left;width:69%;}

Unfortunately, I only get the left sidebar, and the right content. Not the top bar, nor the little menu at the bottom of the left menu.

Upvotes: 0

Views: 168

Answers (5)

Yoshi
Yoshi

Reputation: 54649

Try something like:

demo: http://jsfiddle.net/sEKtU/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #top {
        background: lightblue;
      }

      #inner-wrapper {
        position: relative;
      }

      #main {
        margin-left: 200px;
      }

      #main-inner {
        background: lightsteelblue;
        padding: 1px 0;
      }

      #left {
        background: lightSeaGreen;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 200px;
      }

      #left-menu {
        background: lightPink;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="top">
        top
      </div>

      <div id="inner-wrapper">
        <div id="left">
          <div id="left-content">
            left
          </div>

          <div id="left-menu">
            menu
          </div>
        </div>

        <div id="main">
          <div id="main-inner">
            <h1>Lorem ipsum dolor sit amet,</h1>
            <p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            At vero eos et accusam et justo duo dolores et ea rebum.
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem
            ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>​

Upvotes: 0

erik
erik

Reputation: 83

I'd start with this structure: 

<div class="containter">
   <div class="top-bar">
      ...
   </div>
   <div class="div1>
      ...
      <div class="bottom-menu">
         ...
      </div>
   </div>
   <div class="div2">
      ...
   </div>
</div>

Then you're CSS this would be the starting point:

.container { position: relative; }
.top-bar { position: absolute; top: 0; z-index: 5;}
.div1 { height: 100%; position: relative; }
.bottom-menu { position: absolute; bottom: 0; }

That would be a very basic starting point and you would still have to do the styling for it. Sense it sounds like Div2 is going to set the height by being the bigger element Div1 should inherit the overall height of the parent container div.

Setting the Div position to relative will allow you to set the bottom-menu class to an absolute position of bottom 0 so that it will stay on the bottom of the div no matter the height.

Upvotes: 0

cirrus
cirrus

Reputation: 5662

There's a couple of ways to achieve this. You can use the <table/> tag of course although some frown on that. Google do it in Drive though.

In 'modern' browsers, you can also use the "table-cell" CSS property to make your DIVs act like TABLEs, but that's not widely supported on legacy browsers, and IMHO a worse hack than using a table on balance.

You can do it all in DIVs though, cross browser, in pure CSS which requires forcing it to full screen height. There's an answer here and jsFiddle example that should help you with this; https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033 (my answer does NOT require jQuery, despite the title).

Another thing you might want to consider is grabbing a grid library, which will have all the cross browser stuff worked out for you. Twitter bootstrap contains a good grid library, but I prefer this http://responsive.gs/ which is much simpler to configure for your table like layout above. You may need to combine the two in order to get a full-screen height but let the grid do the width layout for you.

Upvotes: 1

JDavies
JDavies

Reputation: 2770

Just create a wrapper and give the wrapper a background colour of the left div. Then position the left and right div and give the right div a colour of your choice. That way when the page expands the wrapper will also expand.

Hope this helps!

Upvotes: 1

alexandernst
alexandernst

Reputation: 15109

There is no such thing as max width or max height. At the very most you can get the screen width/height and use it as if that was the max width/height.

On the other site, you're looking for some kind of layout system. Maybe have a look at http://www.bramstein.com/projects/jlayout/

Upvotes: 0

Related Questions