javascript - 3 row layout, 100% height: 1 auto, 1 auto with scroll, 1 fixed -

i'm struggling create page layout has: header expand match content, footer has fixed height (which never change) , content section fills distance between 2 scroll when necessary.

the difference between , many other 3 row questions asked on need header fluid not fixed.

here's example of after. works in chrome, 40% of target demographic use ie7 , doesn't work in version of ie.

it's worth viewing full page.

html,  body,  form {    height: 100%;    margin: 0;    overflow: hidden;  }    .table {    display: table;    width: 100%;    height: 100%;  }    .table .tr {    display: table-row;  }    .table .tr.header {    background: #ccc;  }    .table .tr.content {    height: 90%;  }    .table .tr.footer {    height: 50px;    background: #ccc;  }    .table .td {    display: table-cell;  }    .innercontent {    height: 100%;    background: #f0f0f0;    overflow: auto;  }

<div class="table">    <div class="tr header">      <div class="td">        <b>header</b>        <br />expands show available content        <br />other content        <br />some more content        <br />even more content        <br />additional content        <br />extended content        <br />enhanced content        <br />ya ya ya      </div>    </div>    <div class="tr content">      <div class="td">          <div class="innercontent">          <b>content</b>          <br /> fill remaining space , scroll if necessary          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />          <br />        </div>        </div>    </div>    <div class="tr footer">      <div class="td">        <b>footer</b>        <br/> has fixed height , never change.      </div>    </div>  </div>

quirks

i can't use flexbox because of ie7 although if there polyfill available (i can't find 1 supports ie7)

i can use html tables (but prefer not to).

i'm happy use javascript solution long airtight, meaning if content in header changes height, content height needs update well; in fact, version working @ moment uses following javascript set height of content area:

function _makecontentscrollable() {      var $template = $(".table"),         $content = $template.children(".content");      $content.height(($(window).height()) - ($content.offset().top + $footer.outerheight(true, true)));  } 

this re-called onresize i'm unsure of best way of calling when header height changes example expanding/collapsing element in header, short of calling callback function on every script might affect height of header seems maintenance nightmare.

you don't need other positioning. check out, uses:

• position: fixed
• padding

this give layout fixed, scrolling (auto), fixed layout.

* {margin: 0; padding: 0; list-style: none; font-family: 'segoe ui';}    body {padding: 70px 0 50px;}    p {margin: 10px 0 0;}  p:first-child {margin: 0;}    .header, .footer {    position: fixed;    left: 0; right: 0;    top: 0;    background-color: #ccc;    padding: 5px;    max-height: 70px;    overflow: hidden;  }  .footer {    top: auto;    bottom: 0;    text-align: center;  }  .content {    position: fixed;    top: 75px; bottom: 35px;    left: 0; right: 0;    overflow: auto;  }

<div class="header">lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus consequuntur tenetur amet quisquam, fuga nobis eligendi perspiciatis saepe inventore nam nihil, ducimus id soluta accusantium iusto! modi itaque vel laudantium.</div>  <div class="content">    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. aperiam iure id culpa provident autem dolor, ea sit excepturi accusamus deleniti maxime repudiandae minima expedita eligendi, quam iste ullam cumque. nesciunt!</span>      <span>itaque dolorem repudiandae qui repellendus error non inventore possimus cum! praesentium nobis laboriosam illum voluptas quidem reiciendis incidunt, rem? sapiente nemo, quam officia eveniet maiores sint. culpa, modi eveniet vel.</span>      <span>asperiores non, facilis ratione placeat culpa, saepe dicta obcaecati, nesciunt blanditiis iste nostrum! rem, suscipit. nesciunt voluptas aliquam deleniti autem vitae repudiandae, hic, similique vel. eius omnis ex voluptatum at?</span>      <span>enim facilis rem dolore tempore numquam iste sapiente id molestias cupiditate accusamus laborum eius consequatur magnam sequi iusto obcaecati officiis, nostrum? eum error praesentium, in eos aperiam voluptatibus pariatur?</span>      <span>ipsam cumque, ab sunt explicabo dolores voluptates repellat aspernatur, molestiae, corporis, impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a. numquam explicabo, odit fugiat reprehenderit fugit dolor aliquam nulla.</span>      <span>qui libero accusamus, eveniet quo ducimus temporibus quia consectetur nulla, dolores obcaecati fuga officiis excepturi sed error esse architecto necessitatibus assumenda aliquam @ quidem quae illo! blanditiis doloribus voluptatum, facilis.</span>      <span>ipsa inventore beatae quibusdam praesentium sunt omnis nesciunt eos incidunt accusantium adipisci, vitae dicta, perspiciatis repellendus, laudantium quam eius consequatur minus, illum reprehenderit. tempora culpa officiis itaque veritatis vitae rem.</span>      <span>temporibus debitis repudiandae molestias praesentium expedita aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor @ mollitia ea ad! laborum, provident. illum iste nam cumque dicta!</span>      <span>est commodi tempore quos nisi voluptatem aperiam totam laudantium vero autem quisquam explicabo labore sapiente, ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint, perspiciatis! saepe asperiores, labore.</span>      <span>at quidem cum iusto pariatur dolor dolorem autem, corporis ipsum libero ipsa possimus fugiat aperiam dicta labore beatae ducimus veniam, molestiae nemo, cumque. veniam mollitia itaque, aliquam porro hic enim!</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. facere perspiciatis magni iusto porro, nam quis, vel architecto rerum provident adipisci eveniet delectus deserunt, beatae dolore! maxime quibusdam non, suscipit perspiciatis.</span>      <span>id dolorem assumenda, minus repudiandae velit facere atque quam sunt sapiente cum? explicabo necessitatibus ipsam pariatur? consequuntur exercitationem, sequi porro temporibus architecto est, similique distinctio harum dicta libero accusantium.</span>      <span>ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at, voluptates architecto aliquid suscipit, natus porro, iusto perferendis. optio error, aspernatur. quaerat hic nobis soluta suscipit eveniet dignissimos, pariatur.</span>      <span>nemo aspernatur vitae non assumenda, similique sapiente totam porro laborum iste saepe facilis, reiciendis placeat impedit natus, itaque ipsam voluptatibus fugit ratione optio, sit iusto. delectus ipsa officia voluptatem minima.</span>      <span>sequi vero vel cupiditate porro ipsam, voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque. eveniet similique quaerat voluptas ex velit, labore molestiae.</span>      <span>quibusdam iusto provident, neque amet, explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praesentium quod dignissimos. laudantium, praesentium consequuntur. dolore sequi, quos. nobis blanditiis, porro aperiam?</span>      <span>natus eius ex ullam nam magnam, facere cupiditate facilis animi soluta maiores reprehenderit illum rem quae, sit velit mollitia excepturi @ dolorum explicabo. ducimus animi, aliquid voluptas cupiditate quos odio!</span>      <span>quo magni nostrum, asperiores delectus numquam qui cum impedit minus laborum explicabo, ab repellat aliquid nihil rem sunt praesentium, quaerat dolore quibusdam aut? temporibus itaque perferendis cumque reprehenderit, quis recusandae?</span>      <span>aspernatur quod @ neque quaerat quidem architecto earum facere nisi, fuga vero deserunt eaque necessitatibus officiis, tenetur iste? expedita maxime dolorem blanditiis sed exercitationem praesentium facere, commodi amet quis nemo.</span>      <span>dolor atque laboriosam, provident tempora. fugit delectus quidem modi cum voluptates, vel obcaecati iure reiciendis. sit ad, sed tempora nobis atque consequuntur dolore ducimus voluptas. sint animi mollitia cumque id.</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. illum dolorem libero blanditiis nobis consequuntur corporis excepturi laudantium ea explicabo facilis dolores fugit, est, voluptatum adipisci incidunt magni! iure obcaecati, facere.</span>      <span>ducimus quidem voluptate voluptas est fuga consequatur pariatur, accusamus, deserunt quisquam excepturi. culpa autem quia veritatis cupiditate soluta, quisquam, corporis assumenda, minus esse odit expedita consequatur aut laboriosam incidunt dolorem.</span>      <span>ipsa aliquam eos velit repudiandae, porro ipsum aliquid et tenetur autem minus quisquam officia deleniti ut reprehenderit commodi natus quis, ab dolor repellat nostrum nobis eaque quo. nulla, veritatis aspernatur.</span>      <span>odit quisquam nam, facere obcaecati neque, eligendi dicta quos esse veniam quasi dolore vitae voluptatum autem corrupti iure vero ipsum unde, iusto ipsam @ optio doloremque. cumque necessitatibus, quisquam mollitia.</span>      <span>provident culpa inventore rerum nemo itaque reiciendis, architecto adipisci laudantium, error, quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi. similique incidunt eius, placeat laudantium ipsa blanditiis error libero.</span>      <span>illum reiciendis exercitationem, cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut placeat sequi excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus, explicabo. sapiente.</span>      <span>fuga velit autem, nemo facilis enim earum nam voluptas omnis adipisci laudantium dignissimos, sint ad quibusdam minima ipsa quaerat consequatur officiis repellat ut ab, eius, voluptate quos assumenda! maiores, necessitatibus!</span>      <span>voluptatum amet deserunt saepe est maiores laborum, in quas deleniti hic iure animi debitis cum earum, qui possimus quisquam porro doloremque, sed eaque nemo aliquam labore dicta voluptatibus? quibusdam, animi.</span>      <span>nam dolorem non illo alias minus quis ratione eveniet nesciunt, tempora aperiam placeat fuga iure quidem quia sed iste voluptate consequatur, ducimus assumenda maiores impedit, saepe. fuga perspiciatis unde eum?</span>      <span>nesciunt sapiente, fugit deserunt, repellendus velit, possimus nobis doloremque rerum magni beatae dicta eos, quaerat nam labore. cupiditate commodi necessitatibus ipsam laudantium dolores, nihil nam totam similique, neque provident accusantium.</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. nesciunt asperiores recusandae corrupti quod magnam ea ratione eveniet excepturi, temporibus dolorem labore, impedit illo, debitis. assumenda harum, consequatur obcaecati reiciendis. aspernatur!</span>      <span>sequi inventore blanditiis, non exercitationem saepe explicabo sapiente mollitia nam tempore enim, optio! aliquam quam, magnam voluptates et laborum excepturi autem nostrum explicabo dolores harum vero cum fuga nesciunt, cumque.</span>      <span>fugit, eligendi optio veniam, quo enim ipsum minus neque natus, vero eaque, consequatur corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus. alias reprehenderit quod perferendis architecto ipsa, consequatur.</span>      <span>nihil architecto minima, inventore, officiis itaque alias odio quibusdam amet? minus quae aliquam, maxime. nam pariatur aut quis, distinctio est, itaque. blanditiis laboriosam molestiae deleniti commodi vel praesentium aperiam consequatur?</span>      <span>qui dolorum dicta, nihil perspiciatis reprehenderit rem esse voluptas porro, quod beatae error excepturi quam tempora, illo. similique minus, unde fuga! earum nesciunt maiores cumque quisquam quam iste numquam!</span>      <span>nisi accusamus, nesciunt vel explicabo veniam laudantium sit delectus debitis id numquam mollitia accusantium itaque sed. voluptatum, nostrum laborum illo labore veritatis, minima nesciunt repellat, neque maiores est magnam!</span>      <span>aspernatur ab reprehenderit doloribus ut hic deleniti eaque veritatis. consequuntur non mollitia blanditiis vitae illo in cum rem minus dicta optio dolorum facilis vero, @ vel beatae earum. corporis?</span>      <span>ad quos expedita officiis odio autem! neque non doloremque voluptatum, laudantium cupiditate voluptas voluptate earum explicabo dolores, nam nobis distinctio ad, aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio?</span>      <span>soluta, minima expedita, dolorem explicabo enim alias amet nam, sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident. ut @ eum deserunt aspernatur ullam expedita tempora, exercitationem nemo.</span>      <span>voluptatem, quae, praesentium? maxime veritatis earum, autem quia minus quae asperiores dolor quo veniam non tenetur vero officiis beatae magnam ipsum aliquam odit rerum illum architecto provident voluptate. architecto, aperiam.</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. amet molestiae quibusdam officiis, sapiente maiores id cupiditate libero autem saepe magnam, quo necessitatibus dolorum iure fugiat perspiciatis praesentium tempora dolore ad.</span>      <span>omnis et perspiciatis blanditiis nulla, non ipsam impedit dolore molestias eos nesciunt nam pariatur delectus temporibus tenetur esse, corrupti voluptatum commodi debitis! maxime, doloribus hic reprehenderit in iusto provident optio.</span>      <span>cupiditate amet, consequuntur neque esse architecto dolorum distinctio. tenetur sapiente tempore possimus libero nam suscipit in commodi vitae, id eligendi cupiditate expedita facilis accusamus praesentium, vero ipsum repellat explicabo?</span>      <span>vero fuga dignissimos officiis. voluptatum error iste, nihil pariatur odio voluptatem molestiae, sit ipsum officiis ex, sed modi ut doloremque provident expedita accusantium earum quidem eveniet ratione ea aperiam. molestias!</span>      <span>sed earum consequuntur ut ea quod officiis animi, nemo expedita sint ullam magni impedit dicta minima debitis, quidem, repudiandae architecto dolorem delectus? aspernatur porro tenetur, quae quasi iusto earum, id.</span>      <span>voluptas dolore voluptates enim cum quasi dicta atque vitae aliquid omnis incidunt possimus quis molestiae, necessitatibus porro molestias, recusandae autem consectetur, officiis dignissimos in. quas incidunt odio obcaecati quod aspernatur.</span>      <span>dolorum, temporibus adipisci dignissimos quod, modi ipsam voluptates ipsa autem necessitatibus perferendis magni, veritatis repudiandae maxime veniam repellendus quo minima quibusdam porro illo neque delectus molestiae facere ab. reiciendis, sapiente.</span>      <span>facere quam qui expedita tenetur optio reprehenderit odit aliquid, officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex, quibusdam. doloremque similique, sit nulla nemo tempora voluptates eum?</span>      <span>magnam voluptas eveniet qui voluptatum cupiditate, natus blanditiis ipsam consequuntur, ex quia, odit. velit maxime sint repellat totam, sit, nobis in temporibus quia pariatur praesentium magni ipsa harum eveniet, laudantium.</span>      <span>dolorum amet laudantium maiores, modi fugit, harum sint ratione ex ad nihil @ velit quam numquam corrupti, esse dolor praesentium laboriosam explicabo. in, itaque, suscipit adipisci nihil ab facilis praesentium.</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. sequi, autem ea nemo et provident, architecto minus deleniti laborum expedita earum omnis, voluptas officiis deserunt. laudantium nesciunt fugit quae nulla reiciendis.</span>      <span>officiis, vero magni aspernatur earum soluta qui animi optio nihil pariatur ad, molestiae possimus omnis cum impedit ab atque ducimus, quas? iste est alias voluptatem amet itaque assumenda obcaecati?</span>      <span>reiciendis veniam laboriosam neque, vero odio nisi placeat vitae provident quia debitis omnis praesentium numquam dolores adipisci explicabo nihil recusandae, repudiandae velit esse expedita blanditiis! rerum mollitia cum suscipit veniam!</span>      <span>quaerat voluptatibus laborum, laudantium nisi dolorum officia id soluta cumque. ex, voluptate doloremque placeat quo harum dignissimos architecto ipsam adipisci cum nisi repellendus quisquam ipsa dolorem odio aspernatur. cum, distinctio.</span>      <span>voluptates ut, quam earum non repellat sit aperiam facere id iste totam sint quidem nemo odit delectus ab culpa, sed voluptate ipsam quos commodi magnam. ipsum quos reiciendis molestiae nesciunt.</span>      <span>dolorum quis rerum architecto consectetur! magni suscipit adipisci voluptates reiciendis eos et minus, inventore quod quisquam aliquid, molestiae, fuga nostrum ipsa! velit debitis distinctio consectetur sed esse iste aspernatur, sit.</span>      <span>dignissimos at, doloremque enim vero voluptatem mollitia fugit soluta corporis veniam similique sed temporibus deserunt quisquam eligendi, ducimus ut molestias sunt quibusdam. perferendis officia, vero facere iste, libero voluptate numquam!</span>      <span>repellat laboriosam eum magnam, nam explicabo assumenda fugit fugiat, cumque, laudantium itaque repudiandae. omnis, laudantium, expedita? nisi iusto @ aut, recusandae, non veniam harum tempora voluptates laboriosam sint laudantium.</span>      <span>quasi quae rerum labore accusamus, optio est pariatur excepturi. voluptatem tenetur fugit doloribus molestiae officiis fuga commodi voluptate, distinctio magni accusamus, labore sequi eligendi reprehenderit, id dicta ullam magnam ipsum.</span>      <span>quidem dolor in reprehenderit, consectetur. tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae. beatae porro magni, sint assumenda fugiat illum, consequuntur atque unde eligendi, quod id!</span>    </p>    <p>      <span>lorem ipsum dolor sit amet, consectetur adipisicing elit. non ipsum illo, facere soluta, enim placeat repudiandae exercitationem sed numquam ratione maxime eligendi dignissimos, ex voluptatum eaque aperiam! veritatis, pariatur, deleniti.</span>      <span>pariatur nulla ducimus, labore saepe temporibus, doloremque, minima totam odit harum corporis omnis impedit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel. atque, dignissimos.</span>      <span>fugiat accusamus aspernatur corrupti, porro? reiciendis placeat cupiditate ea dolorem magnam eligendi molestias distinctio numquam consequuntur fuga ad, atque quaerat saepe beatae delectus explicabo laudantium suscipit porro sed corrupti accusantium.</span>      <span>omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium, alias voluptatem sunt, sapiente ducimus similique totam, architecto minus, culpa. impedit, veritatis, vero. error nesciunt nemo laudantium doloremque harum.</span>      <span>tempora ipsum obcaecati, nemo, exercitationem, modi commodi explicabo voluptates possimus in, suscipit corporis beatae ad alias veniam culpa ipsa? optio, quas, enim! omnis, non, reprehenderit est illum numquam doloribus!</span>      <span>impedit reiciendis quia perferendis, odit natus unde qui explicabo laudantium ipsam dolorem eligendi veritatis. neque, sapiente mollitia consectetur tenetur delectus repellendus nihil quae magnam suscipit amet voluptatibus itaque, magni possimus!</span>      <span>perferendis impedit voluptas aliquid reiciendis, ipsam rem consectetur suscipit corrupti tenetur. ducimus saepe, quibusdam debitis hic veniam aliquid laborum cumque rerum minima magnam itaque, quod, excepturi blanditiis illo officia aliquam?</span>      <span>cupiditate quasi aut adipisci @ sed eaque quo, nulla aperiam labore rem ducimus illum ut quaerat nemo earum fugit accusantium, doloribus soluta molestiae sequi, odit quis quam sapiente voluptates nostrum!</span>      <span>impedit pariatur ab quod hic rem illo voluptatibus, ipsum ipsam ut magnam quasi amet quae ipsa quo maiores est suscipit non sint delectus inventore. autem, quibusdam, odit! odio, dolorum, quo.</span>      <span>qui ipsum ipsa sit laudantium commodi eligendi itaque, beatae tempora tempore. porro expedita nisi minus eaque magni, culpa quibusdam. doloremque dolorum cupiditate hic! voluptatem esse hic error sit ab nihil.</span>    </p>  </div>  <div class="footer">lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>

updated according comments.

update: dynamic height, consider using javascript (jquery) code:

$(function () {   var resizewin = function () {     $(".content").css("top", $(".header").outerheight());   };   resizewin();   $(window).resize(resizewin); }); 

jsbin: http://output.jsbin.com/wikeketequ