html - フッターが下部に固定されず、モバイルで質問がズームされる

Question

私が抱えている問題は 2 つあります。1 つは、フッターが一番下にくっつくことです。

私が抱えている次の問題は、ウェブページをピンチしてズームできるデバイスで、左側のナビゲーション列が原因でコンテンツが完全に破壊されることです。そのような列を持つためのより良い方法はありますか?

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

まず第一に、あなたのフッターは 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 までサポートされており、最新のすべてのブラウザーでサポートされています (一部のブラウザー固有の呼び出しを使用)。これらの修正により、すべてが魔法のように機能するはずです!

モバイルの問題に関しては、ページの最小幅を設定することで解決できると思います (960 ピクセルが一般的に受け入れられている標準ですが、好きなように設定できます)。

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

html - フッターが下部に固定されず、モバイルで質問がズームされる

3 に答える 3

Related

Reference