<div> main은 <body>태그를 부모로 갖는 태그이다.
.main {width:100% ; height 100%}로 화면전체를 블록으로 가지고 있다.
(예제에서는 설명을 위해서 처음 보이는 높이를 1000px로 했다.)
main은 flex값이 주어졌다.
feed와 main.right는 main의 자식이다.(flex의 item들이다.)
feed의 댓글추가 버튼을 누르면 화면의 밑에 댓글이 추가가 되며 스크롤이 생긴다.
position: relative의 경우
position: sticky의 경우
스크롤이 생길 때의 경우의 수.
top > margin-top일 경우
padding 과 margin-top에 의해 박스의 크기가 900px로 정해진다.
top은 100px이지만 공간이 부족하여 50px까지만 나타나고 있다.
댓글추가버튼을 눌러 스크롤을 생성하였다.
빨간색 커다란 네모가 현재 보이는 화면이다.
댓글을 추가하여 30px이 늘어났기에 top이 30px만큼 늘어나 80px이 되었다.
그만큼 main right는 밑으로 밀러 내려간다.
댓글을 더 추가하여 스크롤을 길게 만들었다.
공간이 여유있어 top:100px을 모두 표현하였고 그만큼 main.right는 50px만큼 밑으로 내려갔다.
스크롤을 내리면 position:sticky가 아닌 feed는 그 처음에 padding값만 적용되고 그 상태로 계속 가만히 있는다.
main-right는 현재 보이는 화면을 기준으로 padding값이 계속 적용되고 top:100px역시 계속 적용된다.
그렇게 계속 내리다보면 main-right박스가 화면보다 50px 먼저 스크롤 끝에 도달한다.
스크롤 자체는 완전히 끝난게 아니기 때문에 여기서 더 내리면 top:100px을 유지할 공간이
없어져서 무너지게 된다.
스크롤이 끝에 도달하면 top:50px이 된다.
top < margin-top일 경우
padding, margin-top에 의해 main-right의 상자 크기가 850px로 지정되었다.
top:50px도 적용중이지만 margin-top:100px값에 묻혀서 티나지 않는 상태다.
댓글추가버튼을 눌러 30px만큼 높이를 늘려서 스크롤을 생성하였다.
스크롤이 생성된 후 30px만큼 내리니 margin-top 값이 30px만큼 줄어들어 70px이 되었다.
그리고 main-right박스가 30px만큼 위로 올라간다.
댓글을 많이 추가해 스크롤을 길게한 후 스크롤을 내리면 margin-top:100px은
top:50px까지 내려오고 그 후로는 고정된다.
main-right박스도 50px만큼 올라온 후 계속 고정된다.
스크롤이 끝에 도달할 때까지 변하지 않는다.
top = margin-top일 경우
댓글버튼을 만들어 스크롤 생성.
margin-top과 top의 값이 같기 때문에 main-right의 위치가 변하지 않고 계속 고정된다.
댓글이 많아져 스크롤이 길어져도
스크롤이 끝에 도달해도 고정된건 마찬가지다.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
main은 flex값을 줬고 feed와 main-right는 그 아이템이다.
그래서 기본값으로 부모컨텐츠(main)의 box높이를 따라간다.
그러니 댓글추가로 높이를 높여 스크롤이 생겨도 처음화면의 main 박스의 높이를 따라가기 때문에
main-right의 높이가 늘어나거나 하지 않는다.
------------------------------------------------------------------------------------------------------------
솔직히 그냥 main에다가 align-items:flex-start를 주고
main-right가 자기 컨텐츠 높이 만큼만 갖게 하는게 맘 편하다.
align-items:flex의 경우
top<margin-top, top=margin-top의 경우 똑같다.
top>margin-top (사실 여기선 margin-top은 필요없는 값이다.)
align-items:flex-start로 하면 main-right는 박스높이가 컨텐츠(내용물) 높이이다.
(margin-top으로 박스높이가 결정되지 않는다.)
top:100px을 주는데 공간이 부족하지 않으면 그냥 적용된다.
컨텐츠의 높이가 430px이라 top:70px까지 밖에 못나왔다.
그러면 상위박스의 높이가 높아지면 top:100까지는 커지다가 그 후로 고정될 것이다.
//////////////////////////////////////////////////////////
+추가
Positon:sticky는 가장가까운 스크롤 되는 조상!!!!! 바로 위에있는 main에걸리는게 아니었다 ㅠㅠ body가 스크롤 되면 body에 걸리는거다!!
https://developer.mozilla.org/ko/docs/Web/CSS/position
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
그러니 main에 걸린 height:100vh를 지운다. 애초에 스크롤이 생겨야하는건
main이 아니라 body이기 때문이다.
main에 스크롤이 생길려면 메인범위 바로 옆에 스크롤이 생겨야하는 것이다.
만약에 main에 height: 100vh를 주면 메인의 높이는 피드가 여러개가되면
분명히 1000px이 넘을텐데 vh때문에 1000px로 고정되는 것이다.
나중에 피드가 여러개가된 메인의 높이를 구해야할 때가 있으면 vh때문에 구하지
못하게 되버리는 것이다.
그러니 내가 기존에 했던 바디의 overflow를 숨기고 메인을 바디크기로 늘리고
vh를 준건 하면 안되는 짓이다.
전체화면의 높이가 1000px이라고 했을 때
main_right에 100vh를 주면 얘의 높이가 1000px이 된다. 그런데 top:100px을
주면 1000픽셀이 보이는 화면밖으로 100px만큼 삐져나온다. 그래서
스크롤을 내리다보면 스크롤보다 먼저 삐져나온부분이 바닥에 닿게되는데
그렇게되면 나머지 스크롤을 더 내리면 삐져나온부분이 다시 스크롤 안으로 들어가면서
Top:100px이 깨지고 top은 결국 0px이 된다.
그래서 높이를 100vh를 주지말고 화면의 높이가 1000px이고 top을 100을 줘야
한다면 높이를 900px안쪽으로 만들자 ex) 400px
만약에 화면에 넘어갈정도로 main-right가 길게 형성되면 어떻해요? 라고 물어볼 수 있는데
애초에 main_right는 화면에 고정되게 만들려고 한 녀석인데
ui를 화면이 넘어갈 정도로 구성하는게 말이 안된다.
그러면 애초에 고정할 생각을 하지 말아야지!
'CSS' 카테고리의 다른 글
| TIL#01 생활코딩 -WEB2 상- (0) | 2021.05.05 |
|---|