Question

我对上一个问题表示歉意!!我是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;
}

Answer 1

这是你要找的吗？

<!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/），你可以玩它，看看你是否能想出一个你想要的解决方案。

保证金再次帮助

1 个答案: