diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html
index 8e449ddba9fbe0c810f2dcf755d02705ab9bebc7..dbce0806cdf48540c239db7b458483675a4a60f4 100644
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@@ -28,51 +28,47 @@
<body>
- <!-- Wrap all page content here -->
- <div id="wrap">
-
- <!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top" role="navigation">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project name</a>
- </div>
- <div class="collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#contact">Contact</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!--/.nav-collapse -->
+ <!-- Fixed navbar -->
+ <div class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project name</a>
</div>
+ <div class="collapse navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="dropdown-header">Nav header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!--/.nav-collapse -->
</div>
+ </div>
- <!-- Begin page content -->
- <div class="container">
- <div class="page-header">
- <h1>Sticky footer with fixed navbar</h1>
- </div>
- <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
- <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+ <!-- Begin page content -->
+ <div class="container">
+ <div class="page-header">
+ <h1>Sticky footer with fixed navbar</h1>
</div>
+ <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
+ <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<div id="footer">
diff --git a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
index 553abde08b3e8f4c0e9dda7e82ee9d14aed39017..76ac2ec89c4ae0f39a39f9bccd4ed6218d89800d 100644
--- a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
@@ -1,24 +1,18 @@
/* Sticky footer styles
-------------------------------------------------- */
-
-html,
-body {
- height: 100%;
- /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
- height: auto;
+html {
+ position: relative;
min-height: 100%;
- /* Pad bottom by footer height */
- padding: 0 0 60px;
- /* Negative indent footer by its height */
- margin: 0 auto -60px;
}
-
-/* Set the fixed height of the footer here */
+body {
+ /* Margin bottom by footer height */
+ margin-bottom: 60px;
+}
#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ /* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
@@ -28,7 +22,7 @@ body {
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
-#wrap > .container {
+body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html
index 6a58e10d5f6ae626938cfdcac46eba1a04299861..a1d30106f17fb8cc8f4670c3344f6deb6c7410ae 100644
--- a/docs/examples/sticky-footer/index.html
+++ b/docs/examples/sticky-footer/index.html
@@ -28,17 +28,13 @@
<body>
- <!-- Wrap all page content here -->
- <div id="wrap">
-
- <!-- Begin page content -->
- <div class="container">
- <div class="page-header">
- <h1>Sticky footer</h1>
- </div>
- <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
- <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
+ <!-- Begin page content -->
+ <div class="container">
+ <div class="page-header">
+ <h1>Sticky footer</h1>
</div>
+ <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
+ <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<div id="footer">
diff --git a/docs/examples/sticky-footer/sticky-footer.css b/docs/examples/sticky-footer/sticky-footer.css
index a8f1ccad6002d2741e739e5e97036b75bde896d4..8e9adcfaa4601e97480eca95ba5f369824678edf 100644
--- a/docs/examples/sticky-footer/sticky-footer.css
+++ b/docs/examples/sticky-footer/sticky-footer.css
@@ -1,24 +1,18 @@
/* Sticky footer styles
-------------------------------------------------- */
-
-html,
-body {
- height: 100%;
- /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
- height: auto;
+html {
+ position: relative;
min-height: 100%;
- /* Pad bottom by footer height */
- padding: 0 0 60px;
- /* Negative indent footer by its height */
- margin: 0 auto -60px;
}
-
-/* Set the fixed height of the footer here */
+body {
+ /* Margin bottom by footer height */
+ margin-bottom: 60px;
+}
#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ /* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}