保證金再次幫助

我對上一個問題表示歉意！我很新的stackoverflow，並不知道如何使用這個，因爲我是非常新的HTML和CSS的東西。我正在爲初學者參加我的第一堂課，我們有一個例子，我應該複製它作爲我的項目。請讓我知道如果我沒有這樣做的權利，但這裏是我的代碼看起來像到目前爲止...... 我仍然希望角落被舍入，頁面延伸在它自己的，頁腳總是在底端。白色之外。保證金再次幫助

http://jsfiddle.net/xnu0n3o2/

<div id="header"> 
<h1>H E A D E R</h1> 
</div> 

<h1>My first project!</h1> 
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p 
<div id="footer"> 
This is my test footer. I want it to go outside the white area.. To be specific, I want it on the pink below the white. The problem is, when I set the body height to a certain percent, the page doesn't extend on it's own. 
</div> 

h1 { 
color:purple; 
text-align:center; 
} 

html {background-color:pink; 
background-attachment:fixed; 
} 

body { 
background-color:white; 
border-radius:20px; 
margin-right: 245px; 
margin-left: 240px; 
margin-top: 100px; 
} 

#header { 
background-color:#6F5997; 
border-top-right-radius:15px; 
border-top-left-radius:15px; 
padding:50px; 
}

來源

2014-11-23 Rachel

一開始 – Billy 2014-11-23 23:32:01

頁眉和頁腳的標籤我有他們，但把他們趕走...：S – Rachel 2014-11-23 23:32:53

爲什麼??????????? – Billy 2014-11-23 23:33:28

這是你在找什麼？

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html, 
     body {height: 100%; background-color: pink} 
     body {padding: 40px 40px 0 40px; box-sizing: border-box; margin: 0} 
     p {margin-top: 0} 
     .container {height: 100%} 

     .header {background-color: #6F5997; height: 20%; border-radius: 15px 15px 0 0} 
     h1 {color: purple; margin: 0} 

     .body {background-color: #fff; height: 60%; border-radius: 0 0 15px 15px} 
     .body h2 {color: purple; margin-top: 0} 

     .footer {height: 20%} 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="header"> 
     <h1>Header</h1> 
     </div> 
     <div class="body"> 
     <h2>My first project!</h2> 
     <p>blah blah blah blah blah</p> 
     </div> 
     <div class="footer"> 
     <p>Blah footer</p> 
     </div> 
    </div> 
    </body> 
</html>

上面的一段代碼也動態地改變了各個部分的高度。這裏是我剛剛製作的一個小提琴（http://jsfiddle.net/pavkr/mdfqgfqn/），你可以玩弄它，看看你是否能想出一個你想要的解決方案。

來源

2014-11-24 04:42:17 PavKR

保證金再次幫助

回答

相關問題