kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Sticky footers without any wrappers

Browse source
This commit is contained in:
Panayiotis Lipiridis 2014-02-04 13:56:42 +01:00
parent ef3c560a06
commit 40e1a3bd9f
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>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
@ -70,10 +67,9 @@
<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 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>
<div id="footer">
<div class="container">

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

@ -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 {

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

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

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

@ -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;
}