页脚覆盖了我的内容

Question

我试图让我的页脚保持固定到我的页面底部+不包括我的任何内容。

这里是我的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节如何被页脚遮住。

我该如何预防？

Answer 1

添加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>

Answer 2

添加padding-bottom到身体页脚或更多相同的高度，这里显示：

https://jsfiddle.net/xxzhj54g/1/

这将防止页脚重叠身在每种情况下

Answer 3

给底部固定高度

height:100px 

并给予。内容相同

的边距

margin-bottom:100px