마진 다시 도움

이전 질문에 사과드립니다 !! 나는 HTML과 CSS에 익숙하지 않아서 stackoverflow에 익숙하지 않고 이것을 사용하는 방법을 모르고있다. 초보자를위한 첫 수업을 듣고 있는데, 예를 들어 프로젝트로 그것을 복제해야합니다. 이 일을 제대로하지 않으면 알려주세요.하지만 지금까지 내 코드가 지금까지와 같이 보이는 것입니다 ... 저는 계속해서 코너가 둥글게되고, 자신 만의 페이지가 확장되어 항상 바닥 글과 함께 나타납니다. 바닥. 흰색 바깥 쪽.마진 다시 도움

는

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

나는 그들을 제외하고 가지고 있었다 : ... S – Rachel

왜 ??????????? – Billy

이 당신을 위해 무엇을 찾고있는 사람인가?

<!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

답변

관련 문제