html - 页脚不粘在底部，问题在移动设备上放大

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>

score 0 · Accepted Answer

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

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

总的来说，我建议将http://learnlayout.com/作为学习定位的绝佳资源。

score 0 · Accepted Answer

你能复制/粘贴你的 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;
}

score 0 · Accepted Answer

嗯，首先，你的页脚大于 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;
}

Box-sizing 支持回 IE8，并且在所有现代浏览器中都受支持（带有一些特定于浏览器的调用）。这些修复应该让你的一切都像魔术一样工作！

至于移动问题，我想说您可以通过设置页面的最小宽度来解决（960px 是普遍接受的标准，但您可以随意设置）。

html - 页脚不粘在底部，问题在移动设备上放大

3 回答 3

Related

Reference