將div的寬度設置為固定側邊欄的右側，以保留視口的剩余100％

Question

注意我必須添加寬度：calc（100％-50px）; ＃header-wrapper和＃footer-wrapper的樣式。 這是為了解決50px寬的固定側邊欄。

我試圖弄清楚為什么我不能只添加樣式寬度：calc（100％-50px）; 到＃main-wrapper，而不是＃header-wrapper和#footer。

若要重現，請對代碼段執行以下操作：將＃header-wrapper和#footer中的寬度都更改為100％。 添加寬度calc（100％-50px）; 到＃main-wrapper。 注意頁腳被截斷。

 html, body { height: 100vh; } #sidebar { position: fixed; top: 0; left: 0; width: 50px; height: 100%; background-color: red; } #main-wrapper { height: 100%; margin-left: 50px; } #header-wrapper { overflow: hidden; position: fixed; top: 0; width: calc(100% - 50px); height: 100px; } #header { width: 100%; height: 50px; background-color: #777; } #subheader { background-color: #ccc; 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-top: 15px; padding-bottom: 15px; } #footer { overflow: hidden; position: fixed; bottom: 0; width: calc(100% - 50px); height: 30px; border-top: solid 1px #ccc; line-height: 30px; } #footer .text-muted { color: #bdbdbd; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="sidebar"></div> <div id="main-wrapper"> <div id="header-wrapper"> <div id="header" class="container-fluid"> My Site Title </div> <div id="subheader" class="container-fluid"> <h4>Page title</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 class="pull-right"> <p>Footer content that gets cut off</p> </div> </div> </div> 

Answer 1

發生這種情況是因為您的元素被定位為“固定”，因此從文檔流中刪除。 此外，它們相對於視口定位（請參見https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning ）。

樣式化這兩個元素的方法可能如下：

#header-wrapper,
#footer {
    width: auto; // Drop the width declaration or set it to auto
    left: 50px;  // And position it with "left" and "right" 
    right: 0;
}

Answer 2

在這種情況下，您可以使用以下代碼：

*注意：您不應該將html頁面位置的主要內容設置為固定，而是可以為其設置margin-top，在其他部分中calc函數被刪除，並且頁面布局仍然不錯！ :)

 * * { box-sizing: border-box; } html, body { height: 100vh; } #sidebar { position: fixed; top: 0; left: 0; width: 50px; height: 100%; background-color: red; z-index:2; } #main-wrapper { position: relative; left : 0; top : 0; height: 100%; margin-left: 50px; padding-top: 100px; padding-bottom: 30px; overflow: hidden; } #header-wrapper { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 2; } #header { width: 100%; height: 50px; background-color: #777; } #subheader { background-color: #ccc; width: 100%; height: 50px; } #subheader h4 { color: #fff; margin-top: 15.4px; margin-bottom: 15.4px; } #content { position: relative; overflow: auto; width: 100%; height: 100%; top : 0; left: 0; padding-top: 15px; padding-bottom: 15px; z-index: 1; } #footer { overflow: hidden; position: absolute; bottom: 0; left: 0; padding-left: 50px; width: 100%; height: 30px; border-top: solid 1px #ccc; line-height: 30px; z-index:2; background : #fff; } #footer .text-muted { color: #bdbdbd; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="sidebar"></div> <div id="main-wrapper"> <div id="header-wrapper"> <div id="header" class="container-fluid"> My Site Title </div> <div id="subheader" class="container-fluid"> <h4>Page title</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 class="pull-right"> <p>Footer content that gets cut off</p> </div> </div> </div> 

Answer 3

這是您要照顧的嗎？ 我通過采用100vw（紅色條的50px）來計算寬度。

它被切除的原因是，如果寬度為100％，則為包裹元素的100％寬度。 因為您使用了position：fixed，實際上它超出了您所看到的范圍。

由於文本必須與可用空間的右側對齊，因此它進入“不可見的部分”並從該偏移處吸引自己。

 html, body { height: 100vh; padding:0px; overflow: hidden; } #sidebar { width: 50px; height: 100vh; float: left; margin:0px; display:inline-block; background-color: red; } #main-wrapper { height: 100vh; width: calc(100% - 50px); float: left; margin:0px; padding:0px; display:inline-block; } #header-wrapper { overflow: hidden; display:inline-block; margin:0px; padding:0px; width: 100%; height: 100px; } #header { width: 100%; height: 50px; margin:0px; background-color: #777; } #subheader { background-color: #ccc; width: 100%; height: 50px; margin:0px; } #subheader h4 { color: #fff; margin-top:15.4px; } #content { display:inline-block; overflow-y: auto; overflow-x: hidden; margin:0px; /** viewport-header-footer-unknown **/ height: calc(100vh - 100px - 30px - 21px ); padding-top: 15px; padding-bottom: 15px; } #footer { width: 100%; height: 30px; border-top: solid 1px #ccc; line-height: 30px; } #footer .text-muted { color: #bdbdbd; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="sidebar"></div> <div id="main-wrapper"> <div id="header-wrapper"> <div id="header" class="container-fluid"> My Site Title </div> <div id="subheader" class="container-fluid"> <h4>Page title</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 class="pull-right"> <p>Footer content that gets cut off</p> </div> </div> </div>