콘텐츠 높이가 너무 큰 경우 CSS 여백이 작동하지 않습니다.

여기에 jsfiddle입니다.
코드 :콘텐츠 높이가 너무 큰 경우 CSS 여백이 작동하지 않습니다.

<body> 
    <div id="all"> 
     <p>just testing</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
      </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
      </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
      just testing 
     </p> 
    </div> 
</body> 

html, body { 
    height : 100%; 
} 
#all { 
    background-color: red; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    min-height: 95%; 
}

내가 달성하고자하는 것은 :
한다고 가정 h는 전체 화면의 높이입니다.
h x 5% 상단에 여백이 있습니다.
h x 90% 콘텐츠.
h x 5% 하단에 여백이 있습니다.
콘텐츠가 둘 이상의 페이지 인 경우 여백을 유지하고 콘텐츠의 높이를 높이기를 원합니다.

내 <p> 태그에있는 </br> 개를 모두 삭제하면 작동합니다.
그러나 1 페이지 이상의 콘텐츠가있는 경우 하단 여백이 사라집니다.
그럼 어떻게해야합니까?

그건 그렇고, css의 95 % min-height는 놀랍지 만 옳습니다. (90 %가 아님). MDN과 W3School은 높이가 여백/패딩/경계를 포함하지 않는다고 제안하는 것 같습니다.

출처

2013-10-08 octref

나는 바이올린의 상단과 하단 모두에 여백이 표시됩니다. –

@ C-Link Hack, 파이어 폭스에서 열면 마진도 보입니다! 하지만 안타깝게도 크롬에서는 작동하지 않습니다. – octref

콘텐츠 아래에 div를 추가하십시오.

<body> 
    <div id="all"> 
     <p> 
     There is a lot of content here. 
     </p> 
    </div> 
    <div style="height:1px"></div> 
<body>

여기에 그들이 필요하지 않습니다으로 http://jsfiddle.net/jeZmR/

출처

2013-10-08 03:16:45 Sorter

이것은 작동하지 않습니다 ... 생각하지 않았습니다! – octref

은 HTML과 몸 태그의 CSS를 제거하기 데모입니다. 필요한 모든 CSS는 #ALL

#all { 
    background-color: red; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    min-height: 95%; 
}

여기에서 작동합니다. JSFiddle입니다.

출처

2013-10-08 03:18:05 allejo

하지만 여백/패딩을 0으로 전역 적으로 추가하는 것은 올바른 일입니까? – octref

그것은 필요하지 않습니다. 실수로 습관으로 추가했습니다. JSFiddle 예제를 업데이트했습니다. – allejo

하지만 다른 문제는 컨텐츠가 한 페이지 미만일 때 div가 90 %를 채우지 않는다는 것입니다. 그래서 html과 body가 필요합니다. – octref

콘텐츠 높이가 너무 큰 경우 CSS 여백이 작동하지 않습니다.

답변

관련 문제