为什么我的页脚不会转到页面底部？
Why won't my footer go to the bottom of the page?
所以我试图让我的页脚具有透明背景，并位于页面底部和主要内容区域之外。它在我的所有页面上执行此操作，但我的“关于”页面除外。我希望我所有页面上的页脚看起来像这样（运行 代码片段，我希望它看起来像视口为 500px+ 时的页脚）：
/*****UNIVERSAL SELECTORS*****/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: linear-gradient(rgba(15,36,0,.5),rgba(15,36,0,.5)),url(../img/background.jpg) no-repeat center;
}
a {
text-decoration: none;
color: inherit;
}
.col p {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*****OTHER*****/
.bwrapper {
width: 50%;
margin: 50px auto;
background-color: #fdffff;
box-shadow: .1px .1px 2px #b3de81,-.1px -.1px 2px #b3de81;
font-family: 'Lato',sans-serif;
}
/*****HEADER SELECTORS*****/
header {
width: 100%;
}
.logo {
width: 100px;
margin: 10px;
}
nav {
display: inline-block;
float: right;
}
nav ul {
margin-top: 30px;
z-index: 100;
}
nav li {
display: inline;
padding: 15px;
color: #b3de81;
}
nav li a {
padding: 15px;
}
#menu-icon {
margin-top: 5%;
height: 40px;
width: 40px;
display: hidden;
background: url(../img/hamburger.png);
opacity: .5;
}
#menu-icon:hover {
opacity: 1;
transition: all .5s;
}
/*****SLIDER*****/
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.callbacks_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(0,0,0, .6);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
/*****THREE COLUMNS*****/
.twrapper {
width: 100%;
margin: auto;
text-align: center;
color: #004040;
}
.twrapper a {
color: blue;
}
/*****FOOTER*****/
footer {
text-align: center;
height: 30px;
margin: 0;
padding-top: 3%;
font-family: 'Josefin Sans',sans-serif;
background-color: transparent;
color: #b3de81;
}
/*****CONTACT*****/
.section h1 {
text-align: center;
}
.section {
padding: 30px;
overflow: auto;
}
.cms-g-map {
text-align: center;
}
.section2 {
background-color: #b3de81;
color: white;
}
.section 2 label {
display: block;
}
.section2 input {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
margin: 10px;
font-size: 2em;
}
.section2 input:hover,
.section2 input:active,
.section2 input:focus,
.section2 textarea:hover,
.section2 textarea:active,
.section2 textarea:focus {
border: solid blue 5px;
}
.section2 textarea {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
}
.form1,
.form2,
.form3,
.form4,
.form5,
.form6,
.form7 {
float: left;
}
.section p {
padding-bottom: 10px;
}
/*****ABOUT*****/
.section p {
line-height: 2em;
}
.section a {
color: blue;
}
.accordion, .menu {
background-color: #fdffff;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: #b3de81;
color: #fff;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
border-top: 1px solid #666;}
.accordion-panel {
display: none;}
.accordion-panel p {
margin: 20px;}
.accordion-panel img {
display: block;
clear: left;}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 930px) {
.col p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
}
@media only screen and (min-width: 1200px) {
.twrapper {
overflow: auto;
margin: 0;
position: relative;
display: flex;
justify-content: center;
}
.col {
float: left;
width: 250px;
margin: 10px;
}
.cms-g-map {
float: right;
}
.col p {
padding: 30px;
}
.section img {
width: 60%;
float: right;
padding: 10px;
}
}
@media only screen and (max-width: 930px) {
.bwrapper {
width: 70%;
}
nav ul {
display: none;
}
#menu-icon {
display: inline-block;
}
nav ul,nav ul:active {
position: absolute;
padding: 40px;
background-color: #fdffff;
right: 10px;
width: 50%;
border: solid 1px #265c00;
box-shadow: 1px 1px 5px black,-1px -1px 5px #000;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav {
padding: 10px;
}
nav:hover ul {
display: block;
margin: 0;
}
.cms-g-map {
float: right;
}
p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
.bubble div {
padding-top: 15px;
}
}
@media only screen and (max-width: 500px) {
header {
margin: 0;
}
.bwrapper {
width: 100%;
margin: 0;
padding: 0;
}
footer {
background-color: #fdffff;
border-top: medium dotted #68a225;
color: #000;
}
.col p {
padding-bottom: 30px;
}
.callbacks_nav {
top: 47%;
}
.section img {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A
Subsidiary Company of Ener-G Foods Inc.</title>
<link href="../../css/normalize.css" rel="stylesheet" type="text/css">
<link href="../../css/hover.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel=
"stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel=
'stylesheet' type='text/css'>
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<meta content="index, follow" name="robots">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta content=
"A dedicated gluten-free facility open to private-label business." name=
"Description">
<meta content="wylde snack foods, ener-g foods inc" name="Keywords">
</head>
<body>
<header>
<a href="#"><img alt="Wylde Snack Foods logo" class="logo hvr-buzz"
src="../../img/energ_logo.gif.gif"></a>
<nav class="nav">
<a href="#" id="menu-icon"></a>
<ul>
<li class="hvr-bob">
<a href="../../index.html">Home</a>
</li>
<li class="hvr-bob">
<a href="products/products.html">Products</a>
</li>
<li class="hvr-bob">
<a href="contract_mfg/contract_mfg.html">Contract MFG</a>
</li>
<li class="hvr-bob">
<a href="../about/index.html">About</a>
</li>
<li class="hvr-bob">
<a href="index.html">Contact</a>
</li>
<li class="hvr-bob">
<a href="http://www.ener-g.com/" target="_blank">Ener-G
Foods</a>
</li>
</ul>
</nav>
</header>
<div class="bwrapper">
<section class="section section1">
<h1>Contact Us</h1>
<p>
<em>Wylde Snack Foods - A wholly owned subsidiary of Ener-G Foods, Inc. Please use any of the contact information below, or use our contact form.</em>
</p>
<p><b>Office Hours:</b><br />
Monday - Thursday, 7am to 3:30pm (Eastern Standard Time)
</p>
<p><b>Mailing Address:</b><br />
Wylde Snack Foods
201 North 3rd Street
Womelsdorf, PA 19567
</p>
<div class="cms-g-map">
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&q=Wylde+Snack+Foods,+201+North+3rd+Street,+Womelsdorf,+PA+19567&fb=1&gl=us&hq=Wylde+Snack+Foods,&hnear=0x89c60eada3120673:0x2c843547090ab477,201+N+3rd+St,+Womelsdorf,+PA+19567&view=map&cid=17113773057302515020&t=m&vpsrc=6&ll=40.366395,-76.188126&spn=0.009809,0.012832&z=15&iwloc=A&output=embed"></iframe>
<br /><small><a href="http://maps.google.com/maps?hl=en&ie=UTF8&q=Wylde+Snack+Foods,+201+North+3rd+Street,+Womelsdorf,+PA+19567&fb=1&gl=us&hq=Wylde+Snack+Foods,&hnear=0x89c60eada3120673:0x2c843547090ab477,201+N+3rd+St,+Womelsdorf,+PA+19567&view=map&cid=17113773057302515020&t=m&vpsrc=6&ll=40.366395,-76.188126&spn=0.009809,0.012832&z=15&iwloc=A&source=embed">View Larger Map</a></small>
</div>
<p><b>Telephone:</b><br />
610-589-6324
</p>
<p><b>Fax:</b><br />
610-589-1483
</p>
<p><b>Store Hours:</b><br />
Wylde Snack Foods Store is open every Thursday, 9am to 6pm.
</p>
</section>
<section class="section section2">
<form action="" method="post">
<fieldset>
<legend>Contact Details</legend>
<div class="form1">
<label>
Company:
<input type="text" name="company" placeholder="optional">
</label>
</div>
<div class="form2">
<label>
Company's Website:
<input type="url" name="website" placeholder="optional">
</label>
</div>
<div class="form3">
<label>
*First Name:
<input type="text" name="first_name" required="required" placeholder="required">
</label>
</div>
<div class="form4">
<label>
Last Name:
<input type="text" name="last_name" placeholder="optional">
</label>
</div>
<div class="form5">
<label>
*Email:
<input type="email" name="email" required="required" placeholder="required">
</label>
</div>
<div class="form6">
<label>
*Telephone Number:
<input type="text" name="telephone" required="required" placeholder="required">
</label>
</div>
</fieldset>
<fieldset>
<div class="form7">
<label>
*Message:
<textarea name="message" required="required" placerholder="Type your message here..."></textarea>
</label>
</div>
</fieldset>
<input type="submit" value="Submit" id="submit">
</form>
</section>
</div>
<footer>
<span>©Wylde Snack Foods</span>
</footer>
</body>
</html>
/*****UNIVERSAL SELECTORS*****/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: linear-gradient(rgba(15,36,0,.5),rgba(15,36,0,.5)),url(../img/background.jpg) no-repeat center;
}
a {
text-decoration: none;
color: inherit;
}
.col p {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*****OTHER*****/
.bwrapper {
width: 50%;
margin: 50px auto;
background-color: #fdffff;
box-shadow: .1px .1px 2px #b3de81,-.1px -.1px 2px #b3de81;
font-family: 'Lato',sans-serif;
}
/*****HEADER SELECTORS*****/
header {
width: 100%;
}
.logo {
width: 100px;
margin: 10px;
}
nav {
display: inline-block;
float: right;
}
nav ul {
margin-top: 30px;
z-index: 100;
}
nav li {
display: inline;
padding: 15px;
color: #b3de81;
}
nav li a {
padding: 15px;
}
#menu-icon {
margin-top: 5%;
height: 40px;
width: 40px;
display: hidden;
background: url(../img/hamburger.png);
opacity: .5;
}
#menu-icon:hover {
opacity: 1;
transition: all .5s;
}
/*****SLIDER*****/
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.callbacks_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(0,0,0, .6);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
/*****THREE COLUMNS*****/
.twrapper {
width: 100%;
margin: auto;
text-align: center;
color: #004040;
}
.twrapper a {
color: blue;
}
/*****FOOTER*****/
footer {
text-align: center;
height: 30px;
margin: 0;
padding-top: 3%;
font-family: 'Josefin Sans',sans-serif;
background-color: transparent;
color: #b3de81;
}
/*****CONTACT*****/
.section h1 {
text-align: center;
}
.section {
padding: 30px;
overflow: auto;
}
.cms-g-map {
text-align: center;
}
.section2 {
background-color: #b3de81;
color: white;
}
.section 2 label {
display: block;
}
.section2 input {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
margin: 10px;
font-size: 2em;
}
.section2 input:hover,
.section2 input:active,
.section2 input:focus,
.section2 textarea:hover,
.section2 textarea:active,
.section2 textarea:focus {
border: solid blue 5px;
}
.section2 textarea {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
}
.form1,
.form2,
.form3,
.form4,
.form5,
.form6,
.form7 {
float: left;
}
.section p {
padding-bottom: 10px;
}
/*****ABOUT*****/
.section p {
line-height: 2em;
}
.section a {
color: blue;
}
.accordion, .menu {
background-color: #fdffff;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: #b3de81;
color: #fff;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
border-top: 1px solid #666;}
.accordion-panel {
display: none;}
.accordion-panel p {
margin: 20px;}
.accordion-panel img {
display: block;
clear: left;}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 930px) {
.col p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
}
@media only screen and (min-width: 1200px) {
.twrapper {
overflow: auto;
margin: 0;
position: relative;
display: flex;
justify-content: center;
}
.col {
float: left;
width: 250px;
margin: 10px;
}
.cms-g-map {
float: right;
}
.col p {
padding: 30px;
}
.section img {
width: 60%;
float: right;
padding: 10px;
}
}
@media only screen and (max-width: 930px) {
.bwrapper {
width: 70%;
}
nav ul {
display: none;
}
#menu-icon {
display: inline-block;
}
nav ul,nav ul:active {
position: absolute;
padding: 40px;
background-color: #fdffff;
right: 10px;
width: 50%;
border: solid 1px #265c00;
box-shadow: 1px 1px 5px black,-1px -1px 5px #000;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav {
padding: 10px;
}
nav:hover ul {
display: block;
margin: 0;
}
.cms-g-map {
float: right;
}
p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
.bubble div {
padding-top: 15px;
}
}
@media only screen and (max-width: 500px) {
header {
margin: 0;
}
.bwrapper {
width: 100%;
margin: 0;
padding: 0;
}
footer {
background-color: #fdffff;
border-top: medium dotted #68a225;
color: #000;
}
.col p {
padding-bottom: 30px;
}
.callbacks_nav {
top: 47%;
}
.section img {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A
Subsidiary Company of Ener-G Foods Inc.</title>
<link href="../../css/normalize.css" rel="stylesheet" type="text/css">
<link href="../../css/hover.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel=
"stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel=
'stylesheet' type='text/css'>
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<meta content="index, follow" name="robots">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta content=
"A dedicated gluten-free facility open to private-label business." name=
"Description">
<meta content="wylde snack foods, ener-g foods inc" name="Keywords">
</head>
<body>
<header>
<a href="#"><img alt="Wylde Snack Foods logo" class="logo hvr-buzz"
src="../../img/energ_logo.gif.gif"></a>
<nav class="nav">
<a href="#" id="menu-icon"></a>
<ul>
<li class="hvr-bob">
<a href="../../index.html">Home</a>
</li>
<li class="hvr-bob">
<a href="products/products.html">Products</a>
</li>
<li class="hvr-bob">
<a href="contract_mfg/contract_mfg.html">Contract MFG</a>
</li>
<li class="hvr-bob">
<a href="index.html">About</a>
</li>
<li class="hvr-bob">
<a href="../contact/index.html">Contact</a>
</li>
<li class="hvr-bob">
<a href="http://www.ener-g.com/" target="_blank">Ener-G
Foods</a>
</li>
</ul>
</nav>
</header>
<div class="bwrapper">
<section class="section">
<h1>Our History</h1>
<p>
Decades ago our customers began asking us for gluten-free pretzels so we started looking for a pretzel producer to make them for us. After unsuccessfully trying to find suppliers, we began searching for equipment to produce our own gluten-free pretzels. During this search, the Reading Bakery Equipment company showed us their used pretzel oven and other equipment which was located in their technical facility in Womelsdorf, PA. They mentioned that they were looking for a buyer to purchase the building. Since the equipment was already set up, we bought the facility.<img src="../../img/building.jpg" alt="Wylde Snack Foods building">Then we began the long process of learning how to make fantastic gluten-free pretzels. This hasn’t been an easy undertaking, but over the years we perfected our pretzels to the utmost quality possible. Now, we believe we produce the best gluten-free pretzels.
</p>
<p>
Wylde Snack Foods is located in beautiful Pennsylvania within historical Womelsdorf. One of the advantages of being located in this area is that it is considered to be the "Pretzel Capital of the World". In the area, there is lots of history and expertise in pretzels. The area is blessed with natural alkaline water which is preferred for manufacturing pretzels.
</p>
<p>
Much of our business is producing for private-label contracts. If you are looking for any of the products we produce, or for any type of gluten-free product, please contact us <a href="../contact/index.html">here</a>.
</p>
</section>
<section class="page section">
<ul class="accordion">
<li>
<button class="accordion-control">Our Team</button>
<div class="accordion-panel">
<p>Aenean venenatis, tellus vel tincidunt cursus, erat dui porttitor augue, eget rhoncus tellus massa vel purus. Phasellus gravida et nibh tincidunt vehicula. Aliquam tempor nunc sapien, ac bibendum augue pretium nec. Nullam eleifend mi a feugiat luctus. In pellentesque nisl non aliquet gravida. Aenean consectetur nisi et tellus rhoncus, ac dignissim mauris sagittis. Duis nec vulputate nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sagittis gravida sapien, quis aliquam felis ullamcorper a. Phasellus aliquam eleifend risus, et euismod ligula suscipit quis. Donec aliquam id sem at sollicitudin.</p>
</div>
</li>
<li>
<button class="accordion-control">Our</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis dui vitae urna suscipit malesuada. Vestibulum vitae cursus eros, vel rhoncus lorem. Morbi elementum risus felis, et tempus libero placerat vitae. Aenean vel pretium nisl, in pretium tellus. Donec posuere erat id felis egestas interdum. Nulla mollis diam id nulla accumsan accumsan. Donec sit amet justo in sapien vulputate eleifend eu nec enim. Proin efficitur sollicitudin urna at cursus.</p>
</div>
</li>
<li>
<button class="accordion-control">Ener-G Foods</button>
<div class="accordion-panel">
<p>Phasellus fringilla a purus vitae mattis. Sed vitae dolor orci. Etiam laoreet mollis ligula quis eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non turpis in dolor fringilla porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet venenatis metus, et aliquam magna. Nunc aliquam nec arcu fermentum ornare.</p>
</div>
</li>
</ul>
</section>
<footer>
<span>©Wylde Snack Foods</span>
</footer>
<script src="../../js/jquery-1.11.0.min.js"></script>
<script src="../../js/accordion.js"></script>
</body>
</html>
非常感谢！
如果将页脚的位置设置为绝对位置，它将超出主容器。从那里，您可以在 css 文件的 'footer' 处添加：
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
<footer>Footer Info</footer>
问题是您永远不会结束“.bwrapper”div，因此它也在包装器中包含了页脚。只需在页脚上方结束 div 就可以了。
所以我试图让我的页脚具有透明背景，并位于页面底部和主要内容区域之外。它在我的所有页面上执行此操作，但我的“关于”页面除外。我希望我所有页面上的页脚看起来像这样（运行 代码片段，我希望它看起来像视口为 500px+ 时的页脚）：
/*****UNIVERSAL SELECTORS*****/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: linear-gradient(rgba(15,36,0,.5),rgba(15,36,0,.5)),url(../img/background.jpg) no-repeat center;
}
a {
text-decoration: none;
color: inherit;
}
.col p {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*****OTHER*****/
.bwrapper {
width: 50%;
margin: 50px auto;
background-color: #fdffff;
box-shadow: .1px .1px 2px #b3de81,-.1px -.1px 2px #b3de81;
font-family: 'Lato',sans-serif;
}
/*****HEADER SELECTORS*****/
header {
width: 100%;
}
.logo {
width: 100px;
margin: 10px;
}
nav {
display: inline-block;
float: right;
}
nav ul {
margin-top: 30px;
z-index: 100;
}
nav li {
display: inline;
padding: 15px;
color: #b3de81;
}
nav li a {
padding: 15px;
}
#menu-icon {
margin-top: 5%;
height: 40px;
width: 40px;
display: hidden;
background: url(../img/hamburger.png);
opacity: .5;
}
#menu-icon:hover {
opacity: 1;
transition: all .5s;
}
/*****SLIDER*****/
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.callbacks_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(0,0,0, .6);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
/*****THREE COLUMNS*****/
.twrapper {
width: 100%;
margin: auto;
text-align: center;
color: #004040;
}
.twrapper a {
color: blue;
}
/*****FOOTER*****/
footer {
text-align: center;
height: 30px;
margin: 0;
padding-top: 3%;
font-family: 'Josefin Sans',sans-serif;
background-color: transparent;
color: #b3de81;
}
/*****CONTACT*****/
.section h1 {
text-align: center;
}
.section {
padding: 30px;
overflow: auto;
}
.cms-g-map {
text-align: center;
}
.section2 {
background-color: #b3de81;
color: white;
}
.section 2 label {
display: block;
}
.section2 input {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
margin: 10px;
font-size: 2em;
}
.section2 input:hover,
.section2 input:active,
.section2 input:focus,
.section2 textarea:hover,
.section2 textarea:active,
.section2 textarea:focus {
border: solid blue 5px;
}
.section2 textarea {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
}
.form1,
.form2,
.form3,
.form4,
.form5,
.form6,
.form7 {
float: left;
}
.section p {
padding-bottom: 10px;
}
/*****ABOUT*****/
.section p {
line-height: 2em;
}
.section a {
color: blue;
}
.accordion, .menu {
background-color: #fdffff;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: #b3de81;
color: #fff;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
border-top: 1px solid #666;}
.accordion-panel {
display: none;}
.accordion-panel p {
margin: 20px;}
.accordion-panel img {
display: block;
clear: left;}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 930px) {
.col p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
}
@media only screen and (min-width: 1200px) {
.twrapper {
overflow: auto;
margin: 0;
position: relative;
display: flex;
justify-content: center;
}
.col {
float: left;
width: 250px;
margin: 10px;
}
.cms-g-map {
float: right;
}
.col p {
padding: 30px;
}
.section img {
width: 60%;
float: right;
padding: 10px;
}
}
@media only screen and (max-width: 930px) {
.bwrapper {
width: 70%;
}
nav ul {
display: none;
}
#menu-icon {
display: inline-block;
}
nav ul,nav ul:active {
position: absolute;
padding: 40px;
background-color: #fdffff;
right: 10px;
width: 50%;
border: solid 1px #265c00;
box-shadow: 1px 1px 5px black,-1px -1px 5px #000;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav {
padding: 10px;
}
nav:hover ul {
display: block;
margin: 0;
}
.cms-g-map {
float: right;
}
p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
.bubble div {
padding-top: 15px;
}
}
@media only screen and (max-width: 500px) {
header {
margin: 0;
}
.bwrapper {
width: 100%;
margin: 0;
padding: 0;
}
footer {
background-color: #fdffff;
border-top: medium dotted #68a225;
color: #000;
}
.col p {
padding-bottom: 30px;
}
.callbacks_nav {
top: 47%;
}
.section img {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A
Subsidiary Company of Ener-G Foods Inc.</title>
<link href="../../css/normalize.css" rel="stylesheet" type="text/css">
<link href="../../css/hover.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel=
"stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel=
'stylesheet' type='text/css'>
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<meta content="index, follow" name="robots">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta content=
"A dedicated gluten-free facility open to private-label business." name=
"Description">
<meta content="wylde snack foods, ener-g foods inc" name="Keywords">
</head>
<body>
<header>
<a href="#"><img alt="Wylde Snack Foods logo" class="logo hvr-buzz"
src="../../img/energ_logo.gif.gif"></a>
<nav class="nav">
<a href="#" id="menu-icon"></a>
<ul>
<li class="hvr-bob">
<a href="../../index.html">Home</a>
</li>
<li class="hvr-bob">
<a href="products/products.html">Products</a>
</li>
<li class="hvr-bob">
<a href="contract_mfg/contract_mfg.html">Contract MFG</a>
</li>
<li class="hvr-bob">
<a href="../about/index.html">About</a>
</li>
<li class="hvr-bob">
<a href="index.html">Contact</a>
</li>
<li class="hvr-bob">
<a href="http://www.ener-g.com/" target="_blank">Ener-G
Foods</a>
</li>
</ul>
</nav>
</header>
<div class="bwrapper">
<section class="section section1">
<h1>Contact Us</h1>
<p>
<em>Wylde Snack Foods - A wholly owned subsidiary of Ener-G Foods, Inc. Please use any of the contact information below, or use our contact form.</em>
</p>
<p><b>Office Hours:</b><br />
Monday - Thursday, 7am to 3:30pm (Eastern Standard Time)
</p>
<p><b>Mailing Address:</b><br />
Wylde Snack Foods
201 North 3rd Street
Womelsdorf, PA 19567
</p>
<div class="cms-g-map">
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&q=Wylde+Snack+Foods,+201+North+3rd+Street,+Womelsdorf,+PA+19567&fb=1&gl=us&hq=Wylde+Snack+Foods,&hnear=0x89c60eada3120673:0x2c843547090ab477,201+N+3rd+St,+Womelsdorf,+PA+19567&view=map&cid=17113773057302515020&t=m&vpsrc=6&ll=40.366395,-76.188126&spn=0.009809,0.012832&z=15&iwloc=A&output=embed"></iframe>
<br /><small><a href="http://maps.google.com/maps?hl=en&ie=UTF8&q=Wylde+Snack+Foods,+201+North+3rd+Street,+Womelsdorf,+PA+19567&fb=1&gl=us&hq=Wylde+Snack+Foods,&hnear=0x89c60eada3120673:0x2c843547090ab477,201+N+3rd+St,+Womelsdorf,+PA+19567&view=map&cid=17113773057302515020&t=m&vpsrc=6&ll=40.366395,-76.188126&spn=0.009809,0.012832&z=15&iwloc=A&source=embed">View Larger Map</a></small>
</div>
<p><b>Telephone:</b><br />
610-589-6324
</p>
<p><b>Fax:</b><br />
610-589-1483
</p>
<p><b>Store Hours:</b><br />
Wylde Snack Foods Store is open every Thursday, 9am to 6pm.
</p>
</section>
<section class="section section2">
<form action="" method="post">
<fieldset>
<legend>Contact Details</legend>
<div class="form1">
<label>
Company:
<input type="text" name="company" placeholder="optional">
</label>
</div>
<div class="form2">
<label>
Company's Website:
<input type="url" name="website" placeholder="optional">
</label>
</div>
<div class="form3">
<label>
*First Name:
<input type="text" name="first_name" required="required" placeholder="required">
</label>
</div>
<div class="form4">
<label>
Last Name:
<input type="text" name="last_name" placeholder="optional">
</label>
</div>
<div class="form5">
<label>
*Email:
<input type="email" name="email" required="required" placeholder="required">
</label>
</div>
<div class="form6">
<label>
*Telephone Number:
<input type="text" name="telephone" required="required" placeholder="required">
</label>
</div>
</fieldset>
<fieldset>
<div class="form7">
<label>
*Message:
<textarea name="message" required="required" placerholder="Type your message here..."></textarea>
</label>
</div>
</fieldset>
<input type="submit" value="Submit" id="submit">
</form>
</section>
</div>
<footer>
<span>©Wylde Snack Foods</span>
</footer>
</body>
</html>
/*****UNIVERSAL SELECTORS*****/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: linear-gradient(rgba(15,36,0,.5),rgba(15,36,0,.5)),url(../img/background.jpg) no-repeat center;
}
a {
text-decoration: none;
color: inherit;
}
.col p {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*****OTHER*****/
.bwrapper {
width: 50%;
margin: 50px auto;
background-color: #fdffff;
box-shadow: .1px .1px 2px #b3de81,-.1px -.1px 2px #b3de81;
font-family: 'Lato',sans-serif;
}
/*****HEADER SELECTORS*****/
header {
width: 100%;
}
.logo {
width: 100px;
margin: 10px;
}
nav {
display: inline-block;
float: right;
}
nav ul {
margin-top: 30px;
z-index: 100;
}
nav li {
display: inline;
padding: 15px;
color: #b3de81;
}
nav li a {
padding: 15px;
}
#menu-icon {
margin-top: 5%;
height: 40px;
width: 40px;
display: hidden;
background: url(../img/hamburger.png);
opacity: .5;
}
#menu-icon:hover {
opacity: 1;
transition: all .5s;
}
/*****SLIDER*****/
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.callbacks_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(0,0,0, .6);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
/*****THREE COLUMNS*****/
.twrapper {
width: 100%;
margin: auto;
text-align: center;
color: #004040;
}
.twrapper a {
color: blue;
}
/*****FOOTER*****/
footer {
text-align: center;
height: 30px;
margin: 0;
padding-top: 3%;
font-family: 'Josefin Sans',sans-serif;
background-color: transparent;
color: #b3de81;
}
/*****CONTACT*****/
.section h1 {
text-align: center;
}
.section {
padding: 30px;
overflow: auto;
}
.cms-g-map {
text-align: center;
}
.section2 {
background-color: #b3de81;
color: white;
}
.section 2 label {
display: block;
}
.section2 input {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
margin: 10px;
font-size: 2em;
}
.section2 input:hover,
.section2 input:active,
.section2 input:focus,
.section2 textarea:hover,
.section2 textarea:active,
.section2 textarea:focus {
border: solid blue 5px;
}
.section2 textarea {
display: block;
border-radius: 1%;
width: 250px;
height: 50px;
border: solid lightblue 5px;
}
.form1,
.form2,
.form3,
.form4,
.form5,
.form6,
.form7 {
float: left;
}
.section p {
padding-bottom: 10px;
}
/*****ABOUT*****/
.section p {
line-height: 2em;
}
.section a {
color: blue;
}
.accordion, .menu {
background-color: #fdffff;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: #b3de81;
color: #fff;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
border-top: 1px solid #666;}
.accordion-panel {
display: none;}
.accordion-panel p {
margin: 20px;}
.accordion-panel img {
display: block;
clear: left;}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 930px) {
.col p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
}
@media only screen and (min-width: 1200px) {
.twrapper {
overflow: auto;
margin: 0;
position: relative;
display: flex;
justify-content: center;
}
.col {
float: left;
width: 250px;
margin: 10px;
}
.cms-g-map {
float: right;
}
.col p {
padding: 30px;
}
.section img {
width: 60%;
float: right;
padding: 10px;
}
}
@media only screen and (max-width: 930px) {
.bwrapper {
width: 70%;
}
nav ul {
display: none;
}
#menu-icon {
display: inline-block;
}
nav ul,nav ul:active {
position: absolute;
padding: 40px;
background-color: #fdffff;
right: 10px;
width: 50%;
border: solid 1px #265c00;
box-shadow: 1px 1px 5px black,-1px -1px 5px #000;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav {
padding: 10px;
}
nav:hover ul {
display: block;
margin: 0;
}
.cms-g-map {
float: right;
}
p {
padding: 30px;
}
.section img {
width: 100%;
padding: 10px;
}
.bubble div {
padding-top: 15px;
}
}
@media only screen and (max-width: 500px) {
header {
margin: 0;
}
.bwrapper {
width: 100%;
margin: 0;
padding: 0;
}
footer {
background-color: #fdffff;
border-top: medium dotted #68a225;
color: #000;
}
.col p {
padding-bottom: 30px;
}
.callbacks_nav {
top: 47%;
}
.section img {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A
Subsidiary Company of Ener-G Foods Inc.</title>
<link href="../../css/normalize.css" rel="stylesheet" type="text/css">
<link href="../../css/hover.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel=
"stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel=
'stylesheet' type='text/css'>
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<meta content="index, follow" name="robots">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta content=
"A dedicated gluten-free facility open to private-label business." name=
"Description">
<meta content="wylde snack foods, ener-g foods inc" name="Keywords">
</head>
<body>
<header>
<a href="#"><img alt="Wylde Snack Foods logo" class="logo hvr-buzz"
src="../../img/energ_logo.gif.gif"></a>
<nav class="nav">
<a href="#" id="menu-icon"></a>
<ul>
<li class="hvr-bob">
<a href="../../index.html">Home</a>
</li>
<li class="hvr-bob">
<a href="products/products.html">Products</a>
</li>
<li class="hvr-bob">
<a href="contract_mfg/contract_mfg.html">Contract MFG</a>
</li>
<li class="hvr-bob">
<a href="index.html">About</a>
</li>
<li class="hvr-bob">
<a href="../contact/index.html">Contact</a>
</li>
<li class="hvr-bob">
<a href="http://www.ener-g.com/" target="_blank">Ener-G
Foods</a>
</li>
</ul>
</nav>
</header>
<div class="bwrapper">
<section class="section">
<h1>Our History</h1>
<p>
Decades ago our customers began asking us for gluten-free pretzels so we started looking for a pretzel producer to make them for us. After unsuccessfully trying to find suppliers, we began searching for equipment to produce our own gluten-free pretzels. During this search, the Reading Bakery Equipment company showed us their used pretzel oven and other equipment which was located in their technical facility in Womelsdorf, PA. They mentioned that they were looking for a buyer to purchase the building. Since the equipment was already set up, we bought the facility.<img src="../../img/building.jpg" alt="Wylde Snack Foods building">Then we began the long process of learning how to make fantastic gluten-free pretzels. This hasn’t been an easy undertaking, but over the years we perfected our pretzels to the utmost quality possible. Now, we believe we produce the best gluten-free pretzels.
</p>
<p>
Wylde Snack Foods is located in beautiful Pennsylvania within historical Womelsdorf. One of the advantages of being located in this area is that it is considered to be the "Pretzel Capital of the World". In the area, there is lots of history and expertise in pretzels. The area is blessed with natural alkaline water which is preferred for manufacturing pretzels.
</p>
<p>
Much of our business is producing for private-label contracts. If you are looking for any of the products we produce, or for any type of gluten-free product, please contact us <a href="../contact/index.html">here</a>.
</p>
</section>
<section class="page section">
<ul class="accordion">
<li>
<button class="accordion-control">Our Team</button>
<div class="accordion-panel">
<p>Aenean venenatis, tellus vel tincidunt cursus, erat dui porttitor augue, eget rhoncus tellus massa vel purus. Phasellus gravida et nibh tincidunt vehicula. Aliquam tempor nunc sapien, ac bibendum augue pretium nec. Nullam eleifend mi a feugiat luctus. In pellentesque nisl non aliquet gravida. Aenean consectetur nisi et tellus rhoncus, ac dignissim mauris sagittis. Duis nec vulputate nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sagittis gravida sapien, quis aliquam felis ullamcorper a. Phasellus aliquam eleifend risus, et euismod ligula suscipit quis. Donec aliquam id sem at sollicitudin.</p>
</div>
</li>
<li>
<button class="accordion-control">Our</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis dui vitae urna suscipit malesuada. Vestibulum vitae cursus eros, vel rhoncus lorem. Morbi elementum risus felis, et tempus libero placerat vitae. Aenean vel pretium nisl, in pretium tellus. Donec posuere erat id felis egestas interdum. Nulla mollis diam id nulla accumsan accumsan. Donec sit amet justo in sapien vulputate eleifend eu nec enim. Proin efficitur sollicitudin urna at cursus.</p>
</div>
</li>
<li>
<button class="accordion-control">Ener-G Foods</button>
<div class="accordion-panel">
<p>Phasellus fringilla a purus vitae mattis. Sed vitae dolor orci. Etiam laoreet mollis ligula quis eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non turpis in dolor fringilla porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet venenatis metus, et aliquam magna. Nunc aliquam nec arcu fermentum ornare.</p>
</div>
</li>
</ul>
</section>
<footer>
<span>©Wylde Snack Foods</span>
</footer>
<script src="../../js/jquery-1.11.0.min.js"></script>
<script src="../../js/accordion.js"></script>
</body>
</html>
非常感谢！
如果将页脚的位置设置为绝对位置，它将超出主容器。从那里，您可以在 css 文件的 'footer' 处添加：
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
<footer>Footer Info</footer>
问题是您永远不会结束“.bwrapper”div，因此它也在包装器中包含了页脚。只需在页脚上方结束 div 就可以了。