rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-28 00:54:30 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'pr/12579'

Browse Source
This commit is contained in:
Mark Otto 2014-02-08 15:53:18 -08:00
commit 842af44fcc
4 changed files with 65 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/examples/sticky-footer-navbar/index.html
View File

@ -28,9 +28,6 @@
<body> <body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar --> <!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container"> <div class="container">
@ -70,10 +67,9 @@
<div class="page-header"> <div class="page-header">
<h1>Sticky footer with fixed navbar</h1> <h1>Sticky footer with fixed navbar</h1>
</div> </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 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> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div> </div>
</div>
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">

28
docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
View File

@ -1,24 +1,18 @@
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html {
html, position: relative;
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;
min-height: 100%; min-height: 100%;
/* Pad bottom by footer height */
padding: 0 0 60px;
/* Negative indent footer by its height */
margin: 0 auto -60px;
} }
body {
/* Set the fixed height of the footer here */ /* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer { #footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px; height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -28,7 +22,7 @@ body {
-------------------------------------------------- */ -------------------------------------------------- */
/* Not required for template or sticky footer method. */ /* Not required for template or sticky footer method. */
#wrap > .container { body > .container {
padding: 60px 15px 0; padding: 60px 15px 0;
} }
.container .text-muted { .container .text-muted {

4
docs/examples/sticky-footer/index.html
View File

@ -28,9 +28,6 @@
<body> <body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content --> <!-- Begin page content -->
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
@ -39,7 +36,6 @@
<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 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> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
</div>
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">

26
docs/examples/sticky-footer/sticky-footer.css
View File

@ -1,24 +1,18 @@
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html {
html, position: relative;
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;
min-height: 100%; min-height: 100%;
/* Pad bottom by footer height */
padding: 0 0 60px;
/* Negative indent footer by its height */
margin: 0 auto -60px;
} }
body {
/* Set the fixed height of the footer here */ /* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer { #footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px; height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }