CODEWITHSUNDEEP
html
Tarang
Tarang

Reputation: 75955

Create a div with a fixed bottom that uses up the rest of the space

I'm making some mobile HTML & would like to have a div that uses up 100% of the space it has, but not use up its container and in it have 3 divs that split it up into 3 parts and have the following layout:

enter image description here

How can I do this using divs, I've tried to but having percentage and fixed height divs is confusing. I can do it with horizontally aligned ones, but vertically it confuses me. I don't want it to overlap by making the bottom one absolute.

Edit

The remaining space is essentially just one big div that has an overscroll-y that uses up the whole space

I have to place the layout in the section underneath the titlebar which is why I cant use position: fixed because it will interfere with the parent container.

enter image description here

Upvotes: 1

Views: 134

Answers (2)

Casey Dwayne
Casey Dwayne

Reputation: 2169

http://jsfiddle.net/wy6rS/1/

<div id="toolbar">This is fixed toolbar.</div>
  <div id="wrap">
    <div id="header">This is the header</div>
      <div id="content">Content will Expand with scripting. Notice the push.</div>
        <div id="push"></div>
  <div> <!--wrap ends here-->
<div id="footer">This is the footer</div>

The push makes room for the sticky footer. Notice equal negative margin on #wrap.

#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */

Then you'll need script to expand the content. Check the jsfiddle. It will work in a real page.

Upvotes: 0

Steward Godwin Jornsen
Steward Godwin Jornsen

Reputation: 1179

First of all, the image in your edited question probably came from JQuery Mobile. Consider using jQuery mobile. It could be an option too.

<style type="text/css">
    #container{position: relative; width: 100%; height: 100%;  background-color:#ddd; z-index:1;}
    #header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
    #footer{position: fixed; bottom:0; left:0; width:100%;  height: 80px;  background-color:#f30;z-index:4;}
    #content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>

<div id="container">

<div id="header">

</div>

<div id="content">
    Put body content here...

</div>

<div id="footer">

</div>

</div>

You might need jQuery to spice it all up. This should give you the basic idea.

Upvotes: 2

Related Questions