플렉스 레이아웃을 사용하는 프런트 엔드 프레임워크를 사용하고 있습니다. sidebar
, header
, main
섹션 이 있는 관리 페이지를 만들기 시작했습니다 . 사이드바와 헤더 + 메인 섹션이 독립적으로 작동하기를 원합니다. 따라서 사이드바에 브라우저 창의 사이트보다 더 많은 데이터가 있는 경우 스크롤바를 사용해야 하지만 항상 전체 공간을 채우려고 하므로 height: 100%
. 헤더 + 메인 섹션에는 스크롤바가 있어야 하지만 헤더는 고정되어서는 안 됩니다. 메인 섹션에 콘텐츠가 많더라도 맨 위에 있어야 합니다.
실제로 섹션 에 추가 overflow: initial
하여 이 작업을 수행했습니다 . 따라서 스크롤 막대는 이제 섹션 의 측면뿐만 아니라 전체 컨테이너 측면에 나타 납니다. 그러나 이렇게 하면 메인 섹션에 더 많은 콘텐츠가 있는 경우 사이드바의 높이가 100%가 되지 않습니다.main
overflow: auto
main
플렉스 레이아웃에서 너무 많이 변경하지 않음으로써 이 문제를 어떻게 고칠 수 있습니까? 예를 들어 사이드바를 수정하면 문제가 해결될 것입니다. 하지만 더 훌륭하고 우아한 방법이 없을까요?
html, body {
margin: 0px;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 0;
-webkit-box-direction: normal;
height: 100%;
}
.aside {
-webkit-transition: margin-left 0.5s ease-in-out;
transition: margin-left 0.5s ease-in-out;
overflow: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 260px;
background: #333;
height: 100%;
color: #fff;
}
.scrollbar {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
position: fixed;
overflow: hidden;
position: relative;
}
.vertical {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
}
.header {
color: #333;
line-height: 50px;
text-align: left;
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 50px;
background: #999;
}
.main {
background-color: #e9eef3;
color: #333;
font-family: "Open Sans", sans-serif;
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
overflow: initial;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}
.card {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<html>
<head>
</head>
<body>
<div class="container">
<aside class="aside">
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
</aside>
<section class="container vertical">
<header class="header">
</header>
<main class="main">
<div class="card">
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
</div>
</main>
</section>
</div>
</body>
</html>
이 경우에 좋은 해킹은 메인+헤더를 한 요소에, 사이드바를 다른 요소에 모두 넣은 다음 이 두 컨테이너를 고정된 상태로 배치하는 것이라고 생각합니다.
그런 다음 헤더는 절대적으로 위치해야 합니다(고정된 위치 헤더+메인 내부에 있어야 메인이 헤더 아래에서 스크롤할 수 있습니다.
이제 디자인해야 할 것은 스크롤 표시를 관리하기 위한 오버플로뿐입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다