3行布局，100％高度：1自动，1自动带滚动，1固定 [英] 3 row layout, 100% height: 1 auto, 1 auto with scroll, 1 fixed

问题描述

我在努力创建一个页面布局，其中包含：标题（将会展开以匹配其内容），页脚更改）和内容部分，填充两者之间的距离，以便在必要时滚动。

href =http://stackoverflow.com/search?q=3%20row>问我的三行问题是，我需要标题是流动的不固定。

这里是我后面的例子。它在Chrome中正常工作，但目标人口的40％使用IE7，这不工作在任何版本的IE。

这是值得作为一个完整的网页。

Quirks < h2>

我不能使用FlexBox因为IE7，虽然我会，如果有一个Polyfill可用（我找不到一个支持IE7）

我可以使用HTML表（但不喜欢）。

我很高兴使用JavaScript解决方案，只要它的气密，意味着如果标题中的内容更改高度，内容高度也需要更新;事实上，我目前使用的版本使用以下JavaScript来设置内容区域的高度：

 函数_makeContentScrollable（）{
 
 var $ template = $（。table），
 $ content = $ template.children（。content）; 
 
 $ content.height（（$（window）.height（）） - （$ content.offset（）。top + $ footer.outerHeight（true，true）））; 
 
} 
  

这是重新调用onresize但我不确定当标题高度改变一个例子时，调用这个方法的最好方法是从标题中的展开/折叠元素，而不是在每个脚本上调用可能影响标题高度的回调函数，这似乎是一个维护噩梦。 / p>

解决方案

除了 position 查看此选项，其中使用：

• position：fixed


• padding

固定，滚动（自动），固定布局。

  * {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：hide;}。footer {top：auto; bottom：0; text-align：center;}。content {position：fixed; top：75px; bottom：35px; left：0; right：0; overflow：auto;}  

 < div class = 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！ < / 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？ A eum error praesentium，in eos aperiam voluptatibus pariatur？< / span> < span> Ipsam cumque，ab sunt explicabo dolores voluptates repellites aspernatur，molestiae，corporis，impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a。       < span> Qui libero accusamus，eveniet quo ducimus temporibus quia consectetur nulla，dolores obcaecati fuga officiis excepturi sed error esse architecto necessiatibibilienda aliquam at quidem quae illo！      < span> Ipsa inventore beatae quibusdam praesunt omnis nesciunt eos incidunt accusantium adipisci，vitae dicta，perspiciatis repellendus，laudantium quam eius consequace minus，illum reprehenderit。 < / span>< / span> < span> Temporibus debitis repudiandae molestias praesentium expedita a aperiam quia veniam sequi delectus，harum atque incidunt consequatur tenetur exercitationem dolor at mollitia ea ad！ Laborum，公共。 Illum iste nam cumque dicta！< / span> < span> Est commodient tempore quos nisi voluptatem aperiam totam laudantium v​​ero autem quisquam explicabo labore sapiente，ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint，perspiciatis！ Saepe asperiores，labore。< / span> < span>在quidem cum iusto pariatur dolor dolorem autem，corporis iipsum 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？解释性必要性      < span> Ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at，voluptates architecto aliquid suscipit，natus porro，iusto perferendis。 Optio误差，aspernatur。 Quaerat hic nobis soluta suscipit eveniet dignissimos，pariatur。< / span> < span> Nemo aspernatur vitae non hypotenda，similique sapiente totam porro laborum iste saepe facilis，reiciendis placeat hindit natus，itaque iipsam voluptatibus fugit ratione optio，sit iusto。 < / span>< / span> < span> Sequi vero vel cupiditate porro ipsam，voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque。 < / span>< / span> < span> Quibusdam iusto provident，neque amet，explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praetentium quod dignissimos。 Laudantium，praetentium等。 Dolore sequi，quos。 Nobis blanditiis，porro aperiam？< / span> < span> Natus eius exullam nam magnam，facere cupiditate facilis animi soluta maiores reprehenderit ill rem re quae，sit velit mollitia excepturi at dolorum explicabo。 Ducimus animi，aliquid voluptas cupiditate quos odio！< / span> < span> Quo magni nstrum，asperiores delectus numquam qui cum hindit minus laborum explicabo，abulsionat aliquid nihil rem sunt praesentium，quaerat dolore quibusdam aut？ Temporibus itaque perferendis cumque reprehenderit，quis recusandae？< / span> < span> Aspernatur quod at neque quaerat quidem architecto earum facere nisi，fuga vero deserunt eaque necessilatibus 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> LODM 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！ < / 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 intersast aut laboriosam inid do 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 at 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。 < / span>< / span> < span> Illum reiciendis exercitationem，cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut place des sequus excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus，explicabo。 < / 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 requitatibus 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。假丝酵母菌，继发性假丝酵母菌。 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，consequrates corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus。 < / span>< / span> < span> Nihil architecto minima，inventore，officiis itaque alias odio quibusdam amet？小叶藻Nam pariatur aut quis，distinctio est，itaque。 < / span>< / span>< / span> < span> Qui a dolorum dicta，nihil perspiciatis reprehenderit rem esse voluptas porro，quod beatae error excepturi quam tempora，illo。 Similique减，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，a neque maiores est magnam！< / span> < span> Aspernatur ab reprehenderit doloribus utic deleniti eaque veritatis。在非洲黑痣中的非致死性非致病性褪黑素。公司？< / span> < span>欢迎广告！ 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。       < 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。建筑师，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 necessitatibib dolorum iure fugiat perspiciatis praesentium tempora dolore ad。< / span> < span> Omnis et perspiciatis blanditiis nulla，non iipsam 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，a vero iipsum 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 accus utum quidem eveniet ratione ea aperiam。 Molestias！< / span> < span> Sed earum consequuntur utoda officiis animi，nemo expedita sint uullam 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，necessusatatibus 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 necessimatibus perferendis magni，veritatis repudiandae maxime veniam repellendus quo minima quibusdam molestiae facere ab。 < / span> < span> Facere quam quit expedita tenetur optio reprehenderit odit aliquid，officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex，quibusdam。 Doloremque similique，sit nulla nemo temporupt 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 qui pariatur praesentium magni ipsa harum eveniet，laudantium。< / span> < span> Dolorum amet laudantium maiores，modi fugit，harum sint ratione ex ad nihil at 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。 < / span>< / span> < span> Officiis，vero magni aspernatur earum soluta qui animi optio nihil pariatur ad，molestiae possimus a omnis cum hindit ab atque ducimus，quas？ < / span>< / span> < span> Reiciendis veniam laboriosam neque，vero odio nisi placeat vitae providity quia debitis omnis praetentium numquam dolores adipisci explicabo nihil recusandae，repudiandae velit esse expedi 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 nstrum 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。全民投票，vero facere iste，libero voluptate numquam！< / span> < span> Repellat laboriosam eum magnam，nam explicabo assumenda fugit fugiat，cumque，laudantium a itaque repudiandae。 Omnis，laudantium，expedita？ Nisi iusto at aut，recusandae，non veniam harum temporum 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在reprehenderit中显示，consectetur。 Tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae。 Beatae porro magni，sint assumptionenda fugiat illum，consequuntur atque unde eligendi，quod id！< / span> < / p> < p> < span> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Non iipsum illo，facere soluta，enim placeat repirationandae 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 hindit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel。 < / span> < span> Fugiat accusamus aspernatur corrupti，porro？           < 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。 < / span>错误。 < span> Tempora ipsum obcaecati，nemo，a 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 quari 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 at sed eaque quo，nulla aperiam labore rem ducimus illum ut quererat 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 fundendi itaque，beatae tempora tempore。 Porro expedita nisi minus eaque magni，culpa quibusdam。 Doloremque dolorum cupiditate hic！ < / span> < / div>  

strong>更新：对于动态高度，您可以考虑使用此JavaScript（jQuery）代码：

  $ （）{
 var resizeWin = function（）{
 $（。content）css（top，$（。header）。outerHeight（））; 
} ; 
 resizeWin（）; 
 $（window）.resize（resizeWin）; 
}）; 
  

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

I'm struggling to create a page layout that has: a header which will expand to match its content, a footer that has a fixed height (which will never change) and a content section that fills the distance between the two that will scroll when necessary.

The difference between this and many other 3 row questions asked on SO is that I need the header to be fluid not fixed.

Here's an example of what I am after. It works perfectly in Chrome, however 40% of the target demographic use IE7 and this doesn't work in any version of IE.

It's worth viewing it as a 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 to show all 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 /> Will fill the remaining space and will 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 and will never change.
    </div>
  </div>
</div>

Quirks

I can't use FlexBox because of IE7 although I would if there was a Polyfill available (I can't find one that supports IE7)

I can use HTML Tables (but would prefer not to).

I'm happy to use a JavaScript solution as long as its airtight, meaning if the content in the header changes the height, the content height needs to update as well; in fact, the version I am working with at the moment uses the following JavaScript to set the height of the content area:

function _makeContentScrollable() {

    var $template = $(".table"),
        $content = $template.children(".content");

    $content.height(($(window).height()) - ($content.offset().top + $footer.outerHeight(true, true)));

}

This is re-called onresize but I'm unsure of the best way of calling this when the header height changes an example would be from an expanding/collapsing element in the header, short of calling a callback function on every script that might affect the height of the header which seems like a maintenance nightmare.

解决方案

You don't need anything other than positioning. Check this out, which uses:

• position: fixed
• padding

This would give you a layout with 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? A 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 at 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 a aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor at 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 a 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 at 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 at 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 at 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 a 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, a 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 a dicta optio dolorum facilis vero, at 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 at 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, a 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 at 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 a 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 a itaque repudiandae. Omnis, laudantium, expedita? Nisi iusto at 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, a 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 at 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 to comments.

Update: For dynamic height, you could consider using this JavaScript (jQuery) code:

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

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

这篇关于3行布局，100％高度：1自动，1自动带滚动，1固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！