具有固定子標題和下方可滾動內容的固定標題
[英]Fixed header with fixed subheader and scrollable content below
問題描述
我的布局正好在我想要的位置。 但是，我嘗試添加一項，但我不知道該怎么做。
如您所見，我有一個固定的側邊欄，該側邊欄跨越了頁面的100％，固定了頂部頁眉，固定了底部頁腳，然后是可滾動的內容部分。 目的是使用戶始終可以始終看到側邊欄，頁眉，頁腳。
我想添加一個高度為80px的子標題div。 該子標題應該在主標題的正下方。 它將用於顯示頁面標題和任何其他頁面動作。 滾動內容部分時，它應該始終可見。
我不確定div應該放在＃wrapper-content之外還是放在它的內部。 另外，不確定css類的外觀。
html, body { height: 100vh; } #app-sidebar { width: 50px; height: 100%; background: #102027; float: left; } #app-wrapper { margin-left: 50px; height: 100%; background: lightblue; } #wrapper-header { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; height: 50px; } #wrapper-content { position:fixed; overflow:auto; background-color: grey; margin-top: 50px; margin-bottom: 20px; height: calc(100% - 70px); } #wrapper-footer { overflow: hidden; background-color: #333; position: fixed; bottom: 0; width: 100%; height: 20px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div id="app-sidebar"></div> <div id="app-wrapper"> <div id="wrapper-header"></div> <div id="wrapper-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> </div> <div id="wrapper-footer"></div> </div> </body>
2 個解決方案
解決方案1
1 已采納 2017-07-24 02:04:02
您可以在標題div之后創建一個新的div，並使其頂部等於標題的高度，並使該div也固定。 您可以將其保留在#wrapper-content和#wrapper-header 。 像這樣：
html, body { height: 100vh; } #app-sidebar { width: 50px; height: 100%; background: #102027; float: left; } #app-wrapper { margin-left: 50px; height: 100%; background: lightblue; } #wrapper-header { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; height: 50px; } #wrapper-subheader { overflow: hidden; background-color: #555; position: fixed; top: 50px; width: 100%; height: 80px; } #wrapper-content { position:fixed; overflow:auto; background-color: grey; top: 130px; bottom: 20px; } #wrapper-footer { overflow: hidden; background-color: #333; position: fixed; bottom: 0; width: 100%; height: 20px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div id="app-sidebar"></div> <div id="app-wrapper"> <div id="wrapper-header"></div> <div id="wrapper-subheader"></div> <div id="wrapper-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> </div> <div id="wrapper-footer"></div> </div> </body>
解決方案2
0 2017-07-24 03:06:01
您可以將其添加到#wrapper-header ，如果需要，可以將其absolute定位在底部，也可以將50px內容放入#wrapper-header ，它將副標題推到底部，然后調整#wrapper-header以包含子#wrapper-header的高度，並調整#wrapper-content的頁margin-top
html, body { height: 100vh; } #app-sidebar { width: 50px; height: 100%; background: #102027; float: left; } #app-wrapper { margin-left: 50px; height: 100%; background: lightblue; } #wrapper-header { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; height: 130px; } #wrapper-subheader { height: 80px; background: #666; position: absolute; bottom: 0; left: 0; right: 0; } #wrapper-content { position:fixed; overflow:auto; background-color: grey; margin-top: 130px; margin-bottom: 20px; height: calc(100% - 150px); } #wrapper-footer { overflow: hidden; background-color: #333; position: fixed; bottom: 0; width: 100%; height: 20px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div id="app-sidebar"></div> <div id="app-wrapper"> <div id="wrapper-header"> <div id="wrapper-subheader"></div> </div> <div id="wrapper-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus. Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem. Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim. Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis, in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim. Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie. Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat tortor. </p> </div> <div id="wrapper-footer"></div> </div> </body>
部分固定的頁眉，固定的頁腳和可變寬度的內容，隨着內容的增長，該內容可以在X和Y方向上滾動
[英]Partially fixed header, fixed footer, and a variable width content that is scrollable in the X and Y directions as content grows
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.