如何使網站

的文章90％的高度我有一個部分，並在其中三個部分：如何使網站

<section id="home"> 

<article id="rechts"> 
<h1>Übersicht</h1> 
</article> 
<article id="mitte"> 
<h1>Leute</h1> 
</article> 
<article id="links"> 
<h1>Links</h1> 
</article> 

</section>

我試圖使文章90％以上的部位的高度。所以我給身體和部分增加了100％的身高。當然，我給了articales 90％的高度。但不知何故，它沒有奏效。我知道有jQuery的非常簡單的解決辦法，但我想用css感謝

http://jsfiddle.net/g6JyD/

我的CSS：

body { width:100%; 
    background-color:#ecf0f1; 
    height: 100%; } 

section { width: 90%; 
    margin: 0px auto; 
    height: 90% 
    } 

article { 
    width:29%; 
    font-family: 'Open Sans', sans-serif; 
    float: left; 
    margin: 5% 2% 10% 2%; 
    padding: 0px; 
    height: 100%; 
} 

#rechts { 
    background-color: #9b59b6 
} 

#mitte { 
    background-color: #16a085; 
} 

#links { 
    background-color: #f1c40f; 
}

來源

2013-10-14 John Smith

注意：讓第一個元素成爲'links'和最後一個'rechts'更合理。例如，當在線顯示文章時，第一個將顯示在左側。 –

你需要明確地爲所有標籤設置高度，所以''也需要有一個高度。 –

讓我們也加入height: 100%到html：

html { 
    height: 100%; 
}

Now it works!

嘿，還是有問題。一些利潤正在破壞佈局。我們將通過復位的body默認margin和padding

body { 
    margin: 0; 
    padding: 0; 
}

現在fiddle岩石修復它！

來源

2013-10-14 19:38:27 matewka

我不知道這是否會解決這個問題，但是你說

我試圖使文章90％以上的部位的高度。所以我給身體和部分增加了100％的身高。當然，我給了articales 90％的高度。

時候，其實在你的CSS，你給部分90％和文章100％

section { width: 90%; 
margin: 0px auto; 
height: 90% 
} 

article { 
width:29%; 
font-family: 'Open Sans', sans-serif; 
float: left; 
margin: 5% 2% 10% 2%; 
padding: 0px; 
height: 100%; 
}

來源

2013-10-14 19:40:46

確保您的正確定位添加到

<section>

元素。這是一個更正的JSFiddle。而我對你的部分元素修正CSS：

section { 
    position:absolute; 
    width: 100%; 
    height: 100%; 
     background-color:red; 
    }

的理由很簡單：只有正確定位元素將讓自己的孩子繼承的高度和寬度屬性。

來源

2013-10-14 19:41:53

回答

相關問題