Skip to content
GitLab
Commit 40e1a3bd authored by Panayiotis Lipiridis's avatar Panayiotis Lipiridis
Browse files

Sticky footers without any wrappers

parent ef3c560a
4 merge requests!28721Hot test,!12579Sticky footers without any wrappers,!22103test,!25326Adjust examples
Hide whitespace changes
Inline Side-by-side
Showing
with 64 additions and 84 deletions
+64 -84
docs/examples/sticky-footer-navbar/index.html
+ 37
- 41
View file @ 40e1a3bd
...@@ -28,51 +28,47 @@ ...@@ -28,51 +28,47 @@
<body> <body>
<!-- Wrap all page content here --> <!-- Fixed navbar -->
<div id="wrap"> <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Fixed navbar --> <div class="navbar-header">
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<div class="container"> <span class="sr-only">Toggle navigation</span>
<div class="navbar-header"> <span class="icon-bar"></span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
<span class="icon-bar"></span> <a class="navbar-brand" href="#">Project name</a>
<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>
<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>
</div>
<!-- Begin page content --> <!-- Begin page content -->
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
<h1>Sticky footer with fixed navbar</h1> <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>
</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 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 id="footer">
......
docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
+ 11
- 17
View file @ 40e1a3bd
/* 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 { ...@@ -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 {
......
docs/examples/sticky-footer/index.html
+ 6
- 10
View file @ 40e1a3bd
...@@ -28,17 +28,13 @@ ...@@ -28,17 +28,13 @@
<body> <body>
<!-- Wrap all page content here --> <!-- Begin page content -->
<div id="wrap"> <div class="container">
<div class="page-header">
<!-- Begin page content --> <h1>Sticky footer</h1>
<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>
<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 id="footer">
......
docs/examples/sticky-footer/sticky-footer.css
+ 10
- 16
View file @ 40e1a3bd
/* 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;
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment