如何在我的CSS佈局中在我的列和頁腳之間添加空白/空白？

Question

不能似乎得到我的專欄和頁腳之間的差距或差距。我曾嘗試使用填充和邊距，但似乎不起作用（請參閱#footer）。最終目標是在列下添加幾個<div>。頁腳是第一個。我是CSS新手，所以想學習基礎知識。

鏈接的jsfiddle HTML/CSS：http://jsfiddle.net/41Lpcq2o/

CSS：

body { 
    background-color: #F7F7F0; 
} 

header { 
    background-image: url("header.jpg"); 
    background-repeat: no-repeat; 
    width: 1000; 
    height: 200; 
    align-content: center; 
    margin-left: 140px; 
} 

h1 { 
    color: #ffffff; 
    padding: 10px; 
    text-align: left; 
} 

#nav ul { 
    list-style: none; 
    background-color: black; 
    margin-left: 140; 
    margin-right: 280; 
    height: 40px; 
    margin-top: 0; 
    color: white; 
} 

#nav li { 
    display: inline-block; 
    padding-top: 10px; 
    padding-left: 50px; 
    padding-right: 50px; 
    padding-bottom: 10px; 
} 

#col1 { 
    margin-left: 10%; 
    width: 20%; 
    height: 30%; 
    float: left; 
    background-color: lightgray; 
} 

#col2 { 
    float: left; 
    margin-left: 1%; 
    height: 30%; 
    width: 20%; 
    background-color: lightgray; 
} 

#col3 { 
    float: left; 
    width: 20%; 
    height: 30%; 
    margin-left: 1%; 
    background-color: lightgray; 
} 

#footer { 
    clear: both; 
    margin-top: 20px; 
    padding-top: 20px; 
    border-top: 1px solid #545454; 
    background-color: #b6c5a3; 
    height: 60; 
    margin-left: 10%; 
    margin-right: 20%; 
    color: #492b40; 
    font: 11px/12px Verdana, Arial, Helvetica, sans-serif; 
} 

HTML

<link rel="stylesheet" href="Style.css"> 

<header> 

    <div id="heading"> 

     <h1> Hello there !!! </h1> 

    </div> 

</header> 



<div id="nav"> 


    <ul> 

     <li> Home </li> 
     <li> About </li> 
     <li> Contact </li> 
     <li> Links</li> 

    </ul> 

</div> 




<div id="Content"> 

    <div id="col1"> 

     col1 

    </div> 

    <div id="col2"> 

     col2 

    </div> 

    <div id="col3"> 

     col 3 

    </div> 




</div> 


<div id="footer"> 


    <p>Copyright 2004 xyz Association</p> 
    <p>All rights reserved etc etc...</p> 

</div> 

Answer 1

那是因爲你的#Content不包含浮動列，因此具有爲0

一個簡單的方法的有效高度解決這個問題就是讓它變成display:inline-block（這會導致它包含浮動d子女），然後給它width:100%以使其與之前一樣完整顯示爲block。

#Content { 
    display: inline-block; 
    width: 100%; 
} 

http://jsfiddle.net/41Lpcq2o/4/

Answer 2

你#content div包含浮動元素#col1，#col2和#col3。所以你首先需要清除#content div的浮動如下。勾選工作fiddle

#Content:after { 
    content:''; 
    display:block; 
    clear:both; 
} 

Answer 3

只是爲了清除浮動不要使用腳註，我加入了一些風格低於

#Content::after { 
    clear:both; 
    content:' '; 
    display:block; 
    margin-bottom:20px; 
} 

#footer { 
    padding-top: 20px; 
    border-top: 1px solid #545454; 
    background-color: #b6c5a3; 
    height: 60; 
    margin-left: 10%; 
    margin-right: 20%; 
    color: #492b40; 
    font: 11px/12px Verdana, Arial, Helvetica, sans-serif; 
} 

＃內容檢查並刪除了明確的：無論是從頁腳，檢查編輯後的完整示例：http://jsfiddle.net/Med7at/cvqpd6je/