将侧边栏 运行 浮动到页脚
Floating sidebar running into footer
我在 Bootstrap 中构建了一个简单的单页网站，其中有一个浮动侧边栏。一切正常，除了某些屏幕尺寸，侧边栏进入页面底部的底部和页脚。一旦它到达页面底部的某个部分，我如何让它停止？有抵消？
这是我的 JS 文件：
$(document).ready(function() {
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 400
}
});
/* activate scrollspy menu */
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
});
Here's 网站。
使用词缀offset.bottom。它应该设置为页脚的高度以及边栏和页脚之间 space 的一些额外填充。
var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').outerHeight() + 60;
$('#account-overview-container').affix({
offset: {
top: headerHeight,
bottom: footerHeight
}
}).on('affix.bs.affix', function() { // before affix
$(this).css({
/*'top': headerHeight,*/ // for fixed height
'width': $(this).outerWidth() // variable widths
});
});
body {
position: relative;
}
header,
footer {
background: #ccc;
padding: 40px 0;
text-align: center;
}
header {
margin-bottom: 10px;
}
#account-overview-container.affix {
position: fixed;
top: 10px
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
bottom: auto !important;
}
footer {
padding: 10px 0;
}
footer h1 {
margin-top: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<header>
<h1>This is the header</h1>
</header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="well well-small affix-top" id="account-overview-container">
<h4 class="no-top-margin">Customer Info</h4>
<ul class="account-info-list list-unstyled no-bottom-margin">
<li><strong class="info-title" style="width: 78px;">Name:</strong>
<span class="info-data" style="width: 180px;">resold1 of reseller2</span>
</li>
<li><strong class="info-title" style="width: 78px;">Location:</strong>
<span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 78px;">Local Time:</strong>
<time class="info-data" datestamp="1/1/0001 12:00:00 AM" title="12:00:00 AM" style="width: 180px;">12:00 AM</time>
</li>
<li><strong class="info-title" style="width: 78px;">Contact:</strong>
<span class="info-data" style="width: 180px;">first last</span>
</li>
<li><strong class="info-title" style="width: 78px;">Phone:</strong>
<span class="info-data" style="width: 180px;">8675309</span>
</li>
<li><strong class="info-title" style="width: 78px;">Mobile:</strong>
<span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 78px;">Email:</strong>
<span class="info-data" style="width: 180px;"><a href="mailto:email@email.com">email@email.com</a></span>
</li>
</ul>
<h4>Business Info</h4>
<ul class="account-info-list list-unstyled no-bottom-margin">
<li> <strong class="info-title" style="width: 80px;">Website:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 80px;">Industry:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 80px;">Employees:</strong>
<span class="info-data" style="width: 178px;">0</span>
</li>
<li> <strong class="info-title" style="width: 80px;">Ownership:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 80px;">Parent:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 80px;">Source:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
</ul>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<fieldset>
<legend>Recent Notes</legend> <a class="space-bottom btn btn-primary" href="#" role="button"><i class="icon-plus icon-white"></i> Create New Note</a>
<table class="table table-bordered">
<colgroup>
<col>
<col style="width: 30%;">
</colgroup>
<tbody>
<tr>
<td>
<h4>hah notes!</h4>
<p>I LOVE NOTES SOOOOOOOO MUCH!</p>
</td>
<td><span class="muted">Created on Mar 4, 2013 at 5:33 pm</span>
<br><span class="muted">Follow-Up on <span class="js-datetime-date">May 06, 2013</span> at <span class="js-datetime-time">12:16 pm</span>
<input class="js-datetime-ms" data-val="true" data-val-number="The field Follow-up Date must be a number." id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1367860578340">
</span>
<br><span class="text-info">user@domain.com</span>
<br>Type:<span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
</div>
<footer>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
</footer>
我在 Bootstrap 中构建了一个简单的单页网站，其中有一个浮动侧边栏。一切正常，除了某些屏幕尺寸，侧边栏进入页面底部的底部和页脚。一旦它到达页面底部的某个部分，我如何让它停止？有抵消？
这是我的 JS 文件：
$(document).ready(function() {
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 400
}
});
/* activate scrollspy menu */
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
});
Here's 网站。
使用词缀offset.bottom。它应该设置为页脚的高度以及边栏和页脚之间 space 的一些额外填充。
var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').outerHeight() + 60;
$('#account-overview-container').affix({
offset: {
top: headerHeight,
bottom: footerHeight
}
}).on('affix.bs.affix', function() { // before affix
$(this).css({
/*'top': headerHeight,*/ // for fixed height
'width': $(this).outerWidth() // variable widths
});
});
body {
position: relative;
}
header,
footer {
background: #ccc;
padding: 40px 0;
text-align: center;
}
header {
margin-bottom: 10px;
}
#account-overview-container.affix {
position: fixed;
top: 10px
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
bottom: auto !important;
}
footer {
padding: 10px 0;
}
footer h1 {
margin-top: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<header>
<h1>This is the header</h1>
</header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="well well-small affix-top" id="account-overview-container">
<h4 class="no-top-margin">Customer Info</h4>
<ul class="account-info-list list-unstyled no-bottom-margin">
<li><strong class="info-title" style="width: 78px;">Name:</strong>
<span class="info-data" style="width: 180px;">resold1 of reseller2</span>
</li>
<li><strong class="info-title" style="width: 78px;">Location:</strong>
<span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 78px;">Local Time:</strong>
<time class="info-data" datestamp="1/1/0001 12:00:00 AM" title="12:00:00 AM" style="width: 180px;">12:00 AM</time>
</li>
<li><strong class="info-title" style="width: 78px;">Contact:</strong>
<span class="info-data" style="width: 180px;">first last</span>
</li>
<li><strong class="info-title" style="width: 78px;">Phone:</strong>
<span class="info-data" style="width: 180px;">8675309</span>
</li>
<li><strong class="info-title" style="width: 78px;">Mobile:</strong>
<span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 78px;">Email:</strong>
<span class="info-data" style="width: 180px;"><a href="mailto:email@email.com">email@email.com</a></span>
</li>
</ul>
<h4>Business Info</h4>
<ul class="account-info-list list-unstyled no-bottom-margin">
<li> <strong class="info-title" style="width: 80px;">Website:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 80px;">Industry:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 80px;">Employees:</strong>
<span class="info-data" style="width: 178px;">0</span>
</li>
<li> <strong class="info-title" style="width: 80px;">Ownership:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li><strong class="info-title" style="width: 80px;">Parent:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
<li> <strong class="info-title" style="width: 80px;">Source:</strong>
<span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span>
</li>
</ul>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<fieldset>
<legend>Recent Notes</legend> <a class="space-bottom btn btn-primary" href="#" role="button"><i class="icon-plus icon-white"></i> Create New Note</a>
<table class="table table-bordered">
<colgroup>
<col>
<col style="width: 30%;">
</colgroup>
<tbody>
<tr>
<td>
<h4>hah notes!</h4>
<p>I LOVE NOTES SOOOOOOOO MUCH!</p>
</td>
<td><span class="muted">Created on Mar 4, 2013 at 5:33 pm</span>
<br><span class="muted">Follow-Up on <span class="js-datetime-date">May 06, 2013</span> at <span class="js-datetime-time">12:16 pm</span>
<input class="js-datetime-ms" data-val="true" data-val-number="The field Follow-up Date must be a number." id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1367860578340">
</span>
<br><span class="text-info">user@domain.com</span>
<br>Type:<span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
<tr>
<td>
<h4>This is another note</h4>
<p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean
shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled,
ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Care</span>
</td>
</tr>
<tr>
<td>
<h4>banjo enim skateboard</h4>
<p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim.
Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia
carles kogi culpa viral hella nihil chambray lo-fi.</p>
</td>
<td> <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span>
<br> <span class="muted">
Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span>
<input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721">
</span>
<br> <span class="text-info">user@domain.com</span>
<br>Type: <span class="label label-info">Billing</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
</div>
<footer>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
<h1>This is the footer</h1>
</footer>