3行布局，100％高度：1自动，1自动带滚动，1固定

本文介绍了3行布局，100％高度：1自动，1自动带滚动，1固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述我在努力创建一个页面布局，其中包含：标题（将会展开以匹配其内容），页脚更改）和内容部分，填充两者之间的距离，以便在必要时滚动。 href =http://stackoverflow.com/search?q=3%20row>问我的三行问题是，我需要标题是流动的不固定。这里是我后面的例子。它在Chrome中正常工作，但目标人口的40％使用IE7，这不工作在任何版本的IE。这是值得作为一个完整的网页。 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％;背景：＃f0f0f0; overflow：auto;} < div class = > < div class =tr header> < div class =td> 标头 展开以显示所有可用内容 其他内容 一些更多内容 扩展内容 增强内容 Ya ya ya< / div> < / div> < div class =tr content> < div class =td> < div class =innerContent> 内容 将填充剩余空间，并将在必要时滚动 < / div> < / div> < / div> < div class =tr footer> < div class =td> Footer 有固定的高度，永远不会改变。 < / div> < / div>< / div> Quirks 我不能使用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> 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！ 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。 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？ 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？ Ipsam cumque，ab sunt explicabo dolores voluptates repellites aspernatur，molestiae，corporis，impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a。 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！ Ipsa inventore beatae quibusdam praesunt omnis nesciunt eos incidunt accusantium adipisci，vitae dicta，perspiciatis repellendus，laudantium quam eius consequace minus，illum reprehenderit。 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！ Est commodient 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。 在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！ 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。 Id dolorem assumenda，minus repudiandae velit facere atque quam sunt sapiente cum？解释性必要性 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。 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。 Sequi vero vel cupiditate porro ipsam，voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque。 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？ 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！ 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？ 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。 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。 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！ 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。 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。 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。 Provident culpa inventore rerum nemo itaque reiciendis，architecto adipisci laudantium，error，quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi。 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。 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！ 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。 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？ 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。 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！ 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。 Fugit，eligendi optio veniam，quo enim ipsum minus neque natus，vero eaque，consequrates corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus。 Nihil architecto minima，inventore，officiis itaque alias odio quibusdam amet？小叶藻Nam pariatur aut quis，distinctio est，itaque。 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！ 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！ Aspernatur ab reprehenderit doloribus utic deleniti eaque veritatis。在非洲黑痣中的非致死性非致病性褪黑素。公司？ 欢迎广告！ Neque non doloremque voluptatum，laudantium cupiditate voluptas voluptate earum explicabo dolores，nam nobis distinctio ad，aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio？ Soluta，minima expedita，dolorem explicabo enim alias amet nam，sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident。 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。 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。 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。 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？ 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！ 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。 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。 Dolorum，temporibus adipisci dignissimos quod，modi ipsam voluptates ipsa autem necessimatibus perferendis magni，veritatis repudiandae maxime veniam repellendus quo minima quibusdam molestiae facere ab。 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？ 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。 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。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Sequi，autem ea nemo et provident，architecto minus deleniti laborum expedita earum omnis，voluptas officiis deserunt。 Officiis，vero magni aspernatur earum soluta qui animi optio nihil pariatur ad，molestiae possimus a omnis cum hindit ab atque ducimus，quas？ 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！ 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。 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。 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。 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！ 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。 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。 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！ 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。 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。 Fugiat accusamus aspernatur corrupti，porro？ Omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium，alias voluptatem sunt，sapiente ducimus similique totam，architecto minus，culpa。 Impedit，veritatis，vero。 错误。 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！ 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！ 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？ 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！ 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。 Qui ipsum ipsa sit laudantium commodi fundendi itaque，beatae tempora tempore。 Porro expedita nisi minus eaque magni，culpa quibusdam。 Doloremque dolorum cupiditate hic！ < / 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"> Header expands to show all available content Other content Some more content Even more content Additional content Extended content Enhanced content Ya ya ya </div> </div> <div class="tr content"> <div class="td"> <div class="innerContent"> Content Will fill the remaining space and will scroll if necessary </div> </div> </div> <div class="tr footer"> <div class="td"> Footer Has fixed height and will never change. </div> </div></div>QuirksI 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: fixedpaddingThis 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"> 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! 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. 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? 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? 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. 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. 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. 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! 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. 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! 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. 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. 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. 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. 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. 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? 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! 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? 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. 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. 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. 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. 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. 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. 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. 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. 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! 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. 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? 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. 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! 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. 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. 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? 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! 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! 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? 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? 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. 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. 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. 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. 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? 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! 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. 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. 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. 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? 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. 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. 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. 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? 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! 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. 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. 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. 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! 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. 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. 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! 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. 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. 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. 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. 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! 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! 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? 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! 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. 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. </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固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！