页脚没有粘到底部，问题放大移动

Question

我遇到了两个问题，一个是让页脚坚持到底部，我使用了http://www.cssstickyfooter.com/解决方案，但我似乎无法让它坚持下去。

我遇到的下一个问题是你可以捏合缩放网页的设备，由于左侧导航栏，内容会被完全破坏。是否有更好的方法让列像这样？

CSS

body {
    border-top: 10px solid #C9CACE;
}

.headers {
    font-family: 'foglihtenregular';
    color: #1b88c7;
    font-size: 60px;
    line-height: 54px;
    margin: 0 0 0 0;
  padding: 20px 0 20px 0;
}

h2 {
  font: 400 40px/1.5 'foglihtenregular';
  margin: 0;
  padding: 0;
}

h3 {
   font: 22px/1.5 'foglihtenregular';
   margin: 0;
   padding: 0;
   color: #1b88c7;
}

/*-------Right Area-------*/
.right {
    padding: 0 0 0 270px;
    border-right: 10px solid #C9CACE;
}

.right, p {
  font-family: 'foglihtenregular';
    font-weight: 500;
    color: #555555;
    font-size: 17px;
    line-height: 1.5;
}

a:link {color: #E48743;}      /* unvisited link */
a:visited {color: #90CA77;}  /* visited link */

/*-------Left Area-------*/
.left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 248px;
    background: url('../img/bg.gif') repeat;
    padding: 15px 0px 0px 0px;
    border-right: 10px solid #C9CACE;
}

.logo {
    display: block;
  padding-left: 50px;
}

#nav {
  width: 200px;
  display: block;
  font-family: 'foglihtenregular';
}

ul {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 10px 0 0 18px;
}

li a {
  text-decoration: none;
  display: block;
  width: 90px;
  margin: 15px 0 0 0;
}

/*-------Left Footer-------*/
#leftfooter {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 120px;   /* Height of the footer */
   text-align: center;
}

#leftfooter p {
  color: #d21700;
  line-height: 7px;
}


/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;

}

.right {  }
.rightt { min-height: 100%; }

.main { overflow:auto;
        padding-bottom: 60px; }  /* must be same height as the footer */

.right_footer {position: relative;
  margin-top: -60px; /* negative value of footer height */
  height: 60px;
  clear:both;
  text-align: center;
  border-top: 1px solid #C9CACE;
} 

.right_footer_text {
  font-size: 12px;
  padding-bottom: 10px;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/*-------Navigation Animation-------*/
@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
.shake {
  display:inline-block
}

@-moz-keyframes spaceboots {
  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
  -moz-animation-name: spaceboots;
  -moz-animation-duration: 0.8s;
  -moz-transform-origin:50% 50%;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
}
.shake {
  display:inline-block
}  

#primelist1 {
  width: 250px;
  float: left;
  margin-right:30%;
  display: inline-block;
}

#primelist2 {
  width: 270px;
  display: inline-block;
}

h3 {
  padding-top: 10px;
}

.main img {
  display: block;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.intro {
  display: block;
  width: 400px;
  text-align: center;
  margin: auto;
}

h2, .altheader {
  font-size: 60px;
}

.content-home {
  text-align: center;
  padding-bottom: 30px;
}

.welcome {
  text-align: center;
}

.labels {
  margin-top: 10px;
}

.labels a {
  margin: 5%;
}



/*Text Styling*/
.under {
  border-bottom: 1px solid #C9CACE;
  width: 230px;
  color: #d21700;
}

.offer {
  color: red;
  font-size: 20px;
  padding-top: 10px;
}

/*Contact Form*/

#contact_form {
  width: 500px;
  padding-top: 15px;
}

form.email p {
font-size: 15px;
padding: 0 0 10px 0;
margin: 0;
}

form.email input, form.email textarea {
font-family: 'foglihtenregular';
font-size: 15px;
margin: 0 0 20px 0;
}

form.email input {
background: #f5f5f5;
padding: 5px;
border: 1px solid #bbb;
border-radius: 5px;
}

form.email textarea {
background: #f5f5f5;
padding: 5px;
border: 1px solid #bbb;
border-radius: 5px;
width: 400px;
height: 250px;
}

form.email input.send {
color: #fff;
background: #222;
border: #000;
padding: 10px 25px 10px 25px;
cursor: pointer;
}

body {
    box-sizing: border-box; /*//to account for the border on top*/
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.right {
    box-sizing: border-box; /*//to account for the padding*/
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    height: 100%;/* //to let the child element fill its parent*/
}
.right-footer {
    height: 129px;
    margin-top: -130px;

}

<!DOCTYPE HTML>
<head>
    <title>About - Little Muffins Nursery</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge" > -->

<!--[if !IE 7]>
  <style type="text/css">
    .rightt {display:table;height:100%}
  </style>
<![endif]-->

</head>

<body>
    <div class="left">
        <div class="logo">
            <img src="img/logo.gif" alt="Little Muffins">
        </div>

        <div class="nav">
            <ul>
                <li><a class="shake" href="index.html"><img src="img/nav/home.png" width="215" height="38" alt="Home" id="nav_home"></a></li>

                <li><a class="shake" href="about.html"><img src="img/nav/about.png" width="215" height="38" alt="About" id="nav_about"></a></li>

                <li><a class="shake" href="curriculum.html"><img src="img/nav/cur.png" width="215" height="38" alt="Curriculum" id="nav_curriculum"></a></li>

                <li><a class="shake" href="contact.html"><img src="img/nav/contact.png" width="215" height="38" alt="Contact" id="nav_contact"></a></li>
            </ul>
        </div>

        <div id="leftfooter">
            <div id="colorfoot">
                <p>314 Kings Street</p>
                <p>London</p>
                <p>W6 0RR</p>
                <p>020 8748 4651</p>
            </div>
        </div>
</div>

<div class="right">
         <div class="rightt">
            <div class="main">
                <h2 class="welcome headers">Welcome To Our New Nursery</h2>
                    <div class="content-home">
                        <p>We are currently enrolling children from 3 months - 5 years on full-time and part-time basis.
                        <br>
                        <br>
                        We are open from 8am - 6pm Monday to Friday 51 weeks of the year. 
                        <br>
                        <br>We will also have a family club on weekends offering lots of fun and exciting activities as well as organizing your child’s favourite themed birthday party.
                        <br>
                        <br>
                        We hope you enjoy browsing our new website, but please bare with us, we still have lots to add.</p>
                        <h4 class="offer">Special offer</h4>
                        <p>We have a special offer for anyone who registers and starts in September or October, giving a 10% discount for your child’s first 3 months fees.</p>
                    </div>
                </div>
            </div>
    <div class="right_footer">
            <div class="labels">
                        <a href="http://ratings.food.gov.uk/business/en-GB/580902">
                            <img src="img/hygiene_label_bw.jpg"
                                 onmouseover="this.src='img/hygiene_label.jpg'"
                                 onmouseout="this.src='img/hygiene_label_bw.jpg'">
                            </img>
                        </a>

                        <a href="http://www.ndna.org.uk">
                            <img src="img/ndna_label_bw.jpg"
                                 onmouseover="this.src='img/ndna_label.jpg'"
                                 onmouseout="this.src='img/ndna_label_bw.jpg'">
                            </img>
                        </a>
            </div>
            <p class="right_footer_text">Copyright &copy; 2013, Little Muffins Nursery. All rights reserved</p>
    </div>


</div>

</body>

</html>

Answer 1

你可以复制/粘贴你的CSS吗？

试试这个：

HTML

<footer>What you want into the footer element</footer>

<强> CSS

footer {
    width:100%;
    height:80px;
    position:fixed;
    bottom:0;
    left:0;
    background:#ee5;
}

Answer 2

嗯，首先，你的页脚大于60px :)它是129px，所以你的页脚高度和它的负上边距应该都是那个（并且你的顶部也有一个边框，所以这意味着-130px保证金。你已经实施了大部分内容，但是你忘记了几件。

body {
    box-sizing: border-box; //to account for the border on top
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.right {
    box-sizing: border-box; //to account for the padding
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    height: 100%; //to let the child element fill its parent
}
.right-footer {
    height: 129px;
    margin-top: -130px;
}

IE8支持Box大小调整，并且在所有现代浏览器中都支持（具有一些特定于浏览器的调用）。这些修复应该让一切都像你一样神奇！

就移动问题而言，我会说你可以通过设置页面的最小宽度来解决（960px是一个普遍接受的标准，但你可以随心所欲地制作它。）

Answer 3

可以使用固定布局调整页脚CSS，如下所示：

.footer {
  position: fixed;
  width: 100%;
  height: 80px;
  bottom: 0;
  right: 0;
}

一般来说，我建议将http://learnlayout.com/作为学习定位的重要资源。