保证金再次帮助

我对上一个问题表示歉意！我很新的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

保证金再次帮助

回答

相关问题