bootstrap container-fluid div的右侧是在页面包装器之外
我试图弄清楚为什么app-wrapper上的margin-left类正在弄乱容器流体。容器流体的右侧被推出页面。 margin-left类用于推动app-wrapper远离50px宽的侧边栏。
html,
body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
}
#header-wrapper {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: 100px;
}
#header {
width: 100%;
height: 50px;
}
#subheader {
background-color: #37474f;
width: 100%;
height: 50px;
}
#subheader h4 {
color: #fff;
margin-top: 15.4px;
margin-bottom: 15.4px;
}
#content {
position: fixed;
overflow: auto;
margin-top: 100px;
margin-bottom: 30px;
height: calc(100% - 130px);
padding: 15px 0 15px 0;
}
#footer {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
border-top: solid 1px #ccc;
}
.logo {
margin-top: 11.5px;
margin-bottom: 11.5px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="header-wrapper">
<div id="header" class="container-fluid">
Logo Goes Here
</div>
<div id="subheader" class="container-fluid">
<h4>Page Title Goes Here</h4>
</div>
</div>
<div id="content" class="container-fluid">
<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="footer" class="container-fluid"></div>
</div>
</body>
</html>
见下图（注意右侧，没有显示填充）：
2 个答案:
答案 0 :(得分：1)
您使用#content＆＃39的填充覆盖填充：
padding: 15px 0 15px 0;
这相当于：
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
修改
最初我看的是内容，但却误解了这个问题。该操作通过屏幕截图澄清了它是关注点的标题。向包装器添加宽度以考虑为侧栏添加的边距引入的偏移量，提供了解决方案：
#header-wrapper {
width: calc( 100% - 50px);
}
试试这个：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
html,
body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
}
#header-wrapper {
overflow: hidden;
position: fixed;
top: 0;
width: calc(100% - 50px);
height: 100px;
}
#header {
width: 100%;
height: 50px;
}
#subheader {
background-color: #37474f;
width: 100%;
height: 50px;
}
#subheader h4 {
color: #fff;
margin-top: 15.4px;
margin-bottom: 15.4px;
}
#content {
position: fixed;
overflow: auto;
margin-top: 100px;
margin-bottom: 30px;
height: calc(100% - 130px);
}
#footer {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
border-top: solid 1px #ccc;
}
.logo {
margin-top: 11.5px;
margin-bottom: 11.5px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="header-wrapper">
<div id="header" class="container-fluid">
Logo Goes Here
</div>
<div id="subheader" class="container-fluid">
<h4>Page Title Goes Here</h4>
</div>
</div>
<div id="content" class="container-fluid">
<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="footer" class="container-fluid"></div>
</div>
</body>
</html>
答案 1 :(得分：1)
您的代码中
padding-right实际上为0。填充值为top，right，bottom，left。因此，padding: 15px 0 15px 0;使padding-right = 0，padding-left = 15px
将填充更改为padding: 15px 15px 0 0;。
您需要使用calc(100% - 50px)
＆＃13;
＆＃13;
＆＃13;
＆＃13;
html,
body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
}
#header-wrapper {
overflow: hidden;
position: fixed;
top: 0;
calc(100% - 50px);
height: 100px;
}
#header {
width: 100%;
height: 50px;
}
#subheader {
background-color: #37474f;
width: 100%;
height: 50px;
}
#subheader h4 {
color: #fff;
margin-top: 15.4px;
margin-bottom: 15.4px;
}
#content {
position: fixed;
overflow: auto;
margin-top: 100px;
margin-bottom: 30px;
height: calc(100% - 130px);
margin-left: 40px;
}
#footer {
overflow: hidden;
position: fixed;
bottom: 0;
width: calc(100% - 50px);
height: 30px;
border-top: solid 1px #ccc;
}
.logo {
margin-top: 11.5px;
margin-bottom: 11.5px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="header-wrapper">
<div id="header" class="container-fluid">
Logo Goes Here
</div>
<div id="subheader" class="container-fluid">
<h4>Page Title Goes Here</h4>
</div>
</div>
<div id="content" class="container-fluid">
<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="footer" class="container-fluid"></div>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？