높이가 100 %로 설정된 경우 스크롤바를 일으키는 div에 약간의 문제가 있습니다.DIV - 100 % 스크롤 막대를 일으키는 높이
지금 내 페이지 콘텐츠는 다음과 같습니다.
<body>
<hr>
<div id="content">
<div id="heading">
</div>
</div>
</body>
문제는 HR이 5px이고 콘텐츠가 신체 높이의 100 %라는 것입니다. 그래서, 페이지 높이의 100 %이기 때문에, 스크롤바가 피하고 싶으므로 HR 아래로 내려 가서 5px를 만듭니다.
질문은 어떻게 높이 100 % 100 % 페이지 높이가되어야하고 페이지 높이의 HR을 포함하지 않아야한다고 생각하지 않습니까?
감사합니다.
이러한 종류의 레이아웃은 절대 위치 지정을 사용하는 것이 가장 좋습니다. 여기에 귀하의 HTML을 사용하여 예입니다 : http://jsfiddle.net/7KGmZ/이
CSS :
#content
{
position: absolute;
top: 20px;
right: 0px;
bottom: 0px;
left: 0px;
}
이것은 아름답게 작동했습니다. 고마워요. 또한 콘텐츠 div에서 "Height"태그를 제거하면 body 태그로 계속 증가합니다. 감사! – Konzine
hr를 제거하고 headingdiv에 테두리를 넣을 수 있습니다.hr을 제거하고 contentdiv에 테두리를 넣고 box-sizing 속성을 border-box으로 변경할 수 있습니다.contentdiv 안에 hr을 이동할 수 있습니다.당신은 시도 할 수 있습니다 : 이것은 그러나 HR을 통해 중복됩니다
position: absolute;
top: 0px;
bottom: 0px;
. 상단 위치를 5px으로 설정하면 그렇지 않습니다.
그런 다음, position: absolute을 설정 top: 5px 및 bottom: 0;를 사용하여 배치 할 수있다.
나에게 문제는 페이지 상단에 상단 여백, 상단 패딩 또는 상단 테두리가있는 요소에 있었는데, 내 바디는 슬라이드 바가 사라진 후 0px로 만든 후 상단 테두리가 10 픽셀이었습니다.
hr을 콘텐츠 div에 넣으려고 했습니까? – steveax
콘텐츠를 추가 할 때 채워지지 않을까요? – Liam