CSS만으로 Div를 페이지 상단으로 수정하는 방법
용어집 페이지를 작성 중입니다. 페이지 상단에 알파벳 링크가 있습니다. 페이지 상단 (알파벳 링크 포함)을 고정하고 페이지의 정의가있는 섹션은 알파벳을 클릭 할 때 위 / 아래로 스크롤합니다.
내 HTML은 다음과 같습니다.
<html>
<head><title>My Glossary</title></head>
<body>
<div id="top">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</body>
</html>
[편집하다]
제가 만들고자하는 효과의 종류는 여기 에있는 것과 비슷합니다 . 차이점은 링크의 예에서 사용자가 카테고리를 클릭하면 페이지 스크롤이 수행된다는 점입니다. 제 경우에는 페이지 상단의 색인 (예 : 알파벳)을 클릭 할 때 페이지를 스크롤하고 싶습니다.
예,이를 수행 할 수있는 여러 가지 방법이 있습니다. "가장 빠른"방법은 다음과 유사한 div에 CSS를 추가하는 것입니다.
#term-defs {
height: 300px;
overflow: scroll; }
이렇게하면 div를 스크롤 할 수 있지만 최상의 효과를 얻지 못할 수 있습니다. 또 다른 경로는 상단에있는 항목의 위치를 절대적으로 고정하는 것입니다. 이와 같은 작업을 수행하여이 작업을 수행 할 수 있습니다.
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
이렇게하면 높이가 23px 인 다른 콘텐츠 위에 상단에 고정됩니다.
최종 구현은 실제로 원하는 효과에 따라 다릅니다.
다음과 같이 할 수 있습니다.
<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
<div id="top" style="position:fixed;background:white;width:100%;">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs" style="padding-top:1em;">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... ->
</dl>
</div>
</body>
</html>
It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div. The background and width are there to cover the contents of the term-defs div as they scroll under the top div.
Hope this helps.
You can simply make the top div fixed:
#top { position: fixed; top: 20px; left: 20px; }
You can also use flexbox, but you'd have to add a parent div that covers div#top and div#term-defs. So the HTML looks like this:
#content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#term-defs {
flex-grow: 1;
overflow: auto;
} <body>
<div id="content">
<div id="top">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</div>
</body>flex-grow ensures that the div's size is equal to the remaining size.
You could do the same without flexbox, but it would be more complicated to work out the height of #term-defs (you'd have to know the height of #top and use calc(100% - 999px) or set the height of #term-defs directly).
With flexbox dynamic sizes of the divs are possible.
One difference is that the scrollbar only appears on the term-defs div.
참고URL : https://stackoverflow.com/questions/6786511/how-to-fix-a-div-to-top-of-page-with-css-only
'Nice programing' 카테고리의 다른 글
| 모든 브라우저에서 jQuery를 사용하여 localStorage 변경 이벤트에 바인딩하는 방법은 무엇입니까? (0) | 2020.11.21 |
|---|---|
| Scala에서 "early initializer"는 무엇입니까? (0) | 2020.11.21 |
| 최신 GHC에서 더 이상 사용되지 않는 DatatypeContext : 이유는 무엇입니까? (0) | 2020.11.21 |
| Unittest의 assertEqual 및 iterables-내용 만 확인 (0) | 2020.11.21 |
| 파일을 잠근 사람을 찾기위한 명령 줄 도구 (0) | 2020.11.20 |