4
고정 폭 DIV가 더 많은 정보를 팝업하는 클릭 가능한 콘텐츠로 사이트를 만들고 있습니다. 이 정보는 꽤 길 수 있고 정적 배경 위에 수직으로 스크롤해야합니다. (Pintrest와 유사). 기본적인 스크롤 작업이 작동하지만 모든 콘텐츠를 올바르게 래핑 할 수 있도록 내 콘텐츠 DIV의 높이를 설정하는 방법을 알아 내려고하는 데 어려움을 겪고 있습니다. 그대로 서서 내용은 DIV 맨 아래로 흐릅니다.유연한 내용이 들어있는 브라우저의 스크롤 막대로 스크롤하는 DIV를 어떻게 만들 수 있습니까?
여기를 간단한 예제로 줄였습니다. 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Scroller Test</title>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
background-color: #7A7A7A;
overflow: hidden;
}
#scroller {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-x: none;
overflow-y: scroll;
}
.infobox {
position: absolute;
top: 0px;
left: 100px;
width: 525px;
height: 100%;
z-index: 100;
background-color: #fff;
overflow: visible;
display: block;
padding: 0;
margin: 50px 0px 50px 0px;
}
.infobox-content {
position: absolute;
width: 475px;
margin: 0px 25px 0px 25px;
}
</style>
</head>
<body>
<div id="scroller">
<div class="infobox">
<div class="infobox-content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
</div>
</body>
</html>
: 내 DIV가 전혀 높이가없는 height을두면 
은 그래서 흰색 배경이 전혀 표시되지 않습니다. 분명히 높이의 픽셀 수를 정할 수는 없습니다. 여백 조정, 여백 조정 등을 시도했지만 아무런 효과가 없습니다. 분명히 나는 이것을 다른 곳에서 해본 것처럼 매우 단순한 것을 간과하고있다. 다른 웹 사이트의 CSS를 살펴보면 내가 뭘 잘못하고 있는지 알 수 없습니다.
참고 :이 예제에서는 기본 'infobox'div 내에 간단한 콘텐츠 div 만 있지만 전체 사이트에는 'infobox'내에있는 다른 것들, 이미지 갤러리, 버튼 등이 있습니다.
@DaveSag? http://jsfiddle.net/94B7H/1/ – Michelle
그보다 가깝습니다. 열쇠는 'infobox-content'를'position : relative;'로 설정하는 것 같다. 감사. –
@DaveSag가 내 답변을 편집했습니다. :) – Michelle