頁腳覆蓋了我的內容

我試圖讓我的頁腳保持固定到我的頁面底部+不包括我的任何內容。頁腳覆蓋了我的內容

這裏是我的HTML

<section id="adminpanel"> 
     <!--Drop down--> 
     <!--Button--> 
     <!--Drop down--> 
     <!--Button--> 
     <!--Drop down--> 
     <!--Button--> 
</section> 
<!--This is the content section--> 
<div class="content"> 
     <div id="accounts"> 
      <!--content--> 
     </div> 
     <div id="facilities"> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
     </div> 
     <div id="accordion"> 
      <h3>section 1</h3> 
      <div> 
       <!--content--> 
      </div> 
      <h3>section2</h3> 
      <div> 
       <!--content--> 
      </div> 
      <h3>section3</h3> 
      <div> 
       <!--content--> 
      </div> 
      <h3>section4</h3> 
      <div> 
       <!--content--> 
      </div> 
     </div> 
    <div id="users"> 
     <!--content--> 
    </div> 
    <div id="newaccount_form"> 
     <!--form--> 
    </div> 
    <div id="newfacility_form"> 
     <!--form--> 
    </div> 
    <div id="newuser_form"> 
     <!--form--> 
    </div> 
</div> 
<footer> 
    <p>Copyright &copy</p> 
</footer>

和我的CSS

html, body { 
    height:100%; 
    min-height: 100%; 
    background-color:grey; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#adminpanel { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:100%; 
    width:15%; 
    float:left; 
} 
.content { 
    position: relative; 
    width:85%; 
    min-height: 100%; 
    float:left; 
    background-color:silver; 
} 
footer { 
    text-align:center; 
    position: fixed; 
    padding:5px; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    background: #999999; 
}

這是我到目前爲止工作的JSFiddle。

請注意第4節如何被頁腳遮住。

我該如何預防？

來源

2015-03-31 Zoxac

添加margin-bottom到.content與等於footer的高度值：

html, body { 
 
    height:100%; 
 
    min-height: 100%; 
 
    background-color:grey; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
#adminpanel { 
 
    line-height:30px; 
 
    background-color:#eeeeee; 
 
    height:100%; 
 
    width:15%; 
 
    float:left; 
 
} 
 
.content { 
 
    position: relative; 
 
    width:85%; 
 
    min-height: 100%; 
 
    float:left; 
 
    background-color:silver; 
 
    margin-bottom: 60px; 
 
} 
 
footer { 
 
    text-align:center; 
 
    position: fixed; 
 
    padding:5px; 
 
    left:0px; 
 
    bottom:0px; 
 
    width:100%; 
 
    background: #999999; 
 
}

<section id="adminpanel"> 
 
     <!--Drop down--> 
 
     <!--Button--> 
 
     <!--Drop down--> 
 
     <!--Button--> 
 
     <!--Drop down--> 
 
     <!--Button--> 
 
</section> 
 
<!--This is the content section--> 
 
<div class="content"> 
 
     <div id="accounts"> 
 
      <!--content--> 
 
     </div> 
 
     <div id="facilities"> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
      <p>test</p> 
 
     </div> 
 
     <div id="accordion"> 
 
      <h3>section 1</h3> 
 
      <div> 
 
       <!--content--> 
 
      </div> 
 
      <h3>section2</h3> 
 
      <div> 
 
       <!--content--> 
 
      </div> 
 
      <h3>section3</h3> 
 
      <div> 
 
       <!--content--> 
 
      </div> 
 
      <h3>section4</h3> 
 
      <div> 
 
       <!--content--> 
 
      </div> 
 
     </div> 
 
    <div id="users"> 
 
     <!--content--> 
 
    </div> 
 
    <div id="newaccount_form"> 
 
     <!--form--> 
 
    </div> 
 
    <div id="newfacility_form"> 
 
     <!--form--> 
 
    </div> 
 
    <div id="newuser_form"> 
 
     <!--form--> 
 
    </div> 
 
</div> 
 
<footer> 
 
    <p>Copyright &copy</p> 
 
</footer>

來源

2015-03-31 13:18:47

是啊，這是我需要什麼。謝謝，只是等待能夠接受答案。 – Zoxac 2015-03-31 13:25:45

@BigRabbit隨時歡迎！我真的很感激你的接受和upvote :) – 2015-03-31 13:49:00