具有固定子标题和下方可滚动内容的固定标题
[英]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.