我的布局正是我想要的地方。但是我想添加一个项目，我无法弄清楚如何去做。
正如你所看到的，我有一个固定的侧边栏，横跨100％的页面，固定顶部标题，固定底部页脚，然后是一个可滚动的内容部分。目标是用户始终可以看到侧边栏，页眉，页脚。
我想添加一个高度为80px的subheader 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>
答案 0 :(得分：1)
你可以在标题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>
答案 1 :(得分：0)
你可以在#wrapper-header内添加它，absolute如果你愿意，可以将它放在底部，或者只将你的50px内容放在#wrapper-header中，它会将子标题推到底部，然后调整#wrapper-header的高度以包含子标题的高度，并调整margin-top的{{1}}
#wrapper-contenthtml, 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;
}