HTML과 CSS만으로 고정 헤더, 각각 스크롤할 수 있는 사이드 메뉴와 메인 컨텐츠를 만들고 싶다
7826 단어 gridlayoutCSSCSS3스크롤HTML5
먼저
이런 레이아웃으로 사이드 메뉴와 메인 컨텐츠를 각각 스크롤할 수 있도록 하고 싶었다.
자주 보는 레이아웃이지만,
전혀 생각대로 코딩할 수 없고 고생했기 때문에 메모해 둡니다.
코드
전제
reset.CSS 제공
HTML
<body>
<header>
<!--任意のヘッダーコンテンツ-->
</header>
<div class="main">
<div class="main-contents">
<aside class="sidebar">
<!--任意のサイドメニューコンテンツ-->
</aside>
<div class="main-contents-body">
<!--任意のメインコンテンツ-->
</div>
</div>
</div>
</body>
CSS
body{
font-size: 1.4rem;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr;
}
/* header */
header{
position: sticky;
top: 0;
height: 60px;
background-color: #eee;
}
/* main */
.main{
grid-column: 1 / 2;
grid-row: 2 / 3;
width: 100%;
height: calc(100vh - 60px);
background: pink;
}
.main-contents{
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr;
align-items: flex-start;
margin: 0 auto;
max-width: 1200px;
height: 100%;
background: #fff;
}
.sidebar{
grid-column: 1 / 2;
grid-row: 1 / 2;
position: sticky;
overflow-y: auto;
height: calc(100vh - 60px);
box-sizing: border-box;
background: hotpink;
}
.main-contents-body{
grid-column: 2 / 3;
grid-row: 1 / 2;
height: calc(100vh - 60px);
overflow-y: auto;
}
해설
display: grid;를 사용하여 요소 분할
3개의 중첩 구조로 만들기
본래라면 body 로 설정한 1개의 grid로 부족한 것 같습니다만,
B를 max-width: 1200px로 만들기 위해서는 중첩 구조가 필요합니다.
전제
reset.CSS 제공
HTML
<body>
<header>
<!--任意のヘッダーコンテンツ-->
</header>
<div class="main">
<div class="main-contents">
<aside class="sidebar">
<!--任意のサイドメニューコンテンツ-->
</aside>
<div class="main-contents-body">
<!--任意のメインコンテンツ-->
</div>
</div>
</div>
</body>
CSS
body{
font-size: 1.4rem;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr;
}
/* header */
header{
position: sticky;
top: 0;
height: 60px;
background-color: #eee;
}
/* main */
.main{
grid-column: 1 / 2;
grid-row: 2 / 3;
width: 100%;
height: calc(100vh - 60px);
background: pink;
}
.main-contents{
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr;
align-items: flex-start;
margin: 0 auto;
max-width: 1200px;
height: 100%;
background: #fff;
}
.sidebar{
grid-column: 1 / 2;
grid-row: 1 / 2;
position: sticky;
overflow-y: auto;
height: calc(100vh - 60px);
box-sizing: border-box;
background: hotpink;
}
.main-contents-body{
grid-column: 2 / 3;
grid-row: 1 / 2;
height: calc(100vh - 60px);
overflow-y: auto;
}
해설
display: grid;를 사용하여 요소 분할
3개의 중첩 구조로 만들기
본래라면 body 로 설정한 1개의 grid로 부족한 것 같습니다만,
B를 max-width: 1200px로 만들기 위해서는 중첩 구조가 필요합니다.
body{
font-size: 1.4rem;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr;
}
/* header */
header{
position: sticky;
top: 0;
height: 60px;
background-color: #eee;
}
/* main */
.main{
grid-column: 1 / 2;
grid-row: 2 / 3;
width: 100%;
height: calc(100vh - 60px);
background: pink;
}
.main-contents{
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr;
align-items: flex-start;
margin: 0 auto;
max-width: 1200px;
height: 100%;
background: #fff;
}
.sidebar{
grid-column: 1 / 2;
grid-row: 1 / 2;
position: sticky;
overflow-y: auto;
height: calc(100vh - 60px);
box-sizing: border-box;
background: hotpink;
}
.main-contents-body{
grid-column: 2 / 3;
grid-row: 1 / 2;
height: calc(100vh - 60px);
overflow-y: auto;
}
display: grid;를 사용하여 요소 분할
3개의 중첩 구조로 만들기
본래라면
body 로 설정한 1개의 grid로 부족한 것 같습니다만,B를
max-width: 1200px로 만들기 위해서는 중첩 구조가 필요합니다.margin: 0 auto; 사이드 메뉴와 메인 콘텐츠를 각각 스크롤
둘 다 height 설정
1건 낭비 보이지만, 이것을 하지 않으면
overflow-y: auto;헤더 아래의 크기로 지정한 것과 같은 높이로 해 주세요.실천한 감상과 보충
평상시는 디렉터직을 하고 있기 때문에, 오랜만에 HTML/CSS에 접한 사람입니다.
지금까지 JavaScript로 처리하고 있던 것이 CSS로 간단하게 쓸 수 있는 시대가 되고 있네요.
상상 이상으로 할 수 있는 일이 많아져서 놀랐습니다.
아마 쇼트 핸드 등 활용해, 더 스마트하게 쓸 수 있다고 생각하기 때문에,
보다 좋은 쓰는 방법이 있으면 교수 받을 수 있으면 다행입니다.
업데이트 내역
<body> 관련 설명 누락 추가 Reference
이 문제에 관하여(HTML과 CSS만으로 고정 헤더, 각각 스크롤할 수 있는 사이드 메뉴와 메인 컨텐츠를 만들고 싶다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shimashimari/items/8705659c0e0c34fd12ba텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
