같은 문제가 있었지만 위의 flexboxes로 해결할 수 없었습니다. 그래서 난 내 자신의 템플릿을 생성, 그것은 포함
- 고정 된 크기의 요소와 헤더
- 바닥 글
- 나머지 높이를 차지하는 스크롤 막대와 사이드 바
- 내용
플렉스 박스를 사용했지만 속성 만 사용하면 더 편리합니다. 디스플레이 : flex 및 플렉스 방향 : 행 :
각도를 사용하고 구성 요소 크기가 상위 요소의 100 %가되도록하고 싶습니다.
열쇠는 크기를 제한하기 위해 모든 부모의 크기 (백분율)를 설정하는 것입니다. 다음 예제에서 myapp 높이의 뷰포트는 100 %입니다.
머리글과 바닥 글의 크기가 5 %이므로 주 구성 요소의 뷰포트 크기가 90 %입니다. https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML : :
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
여기 내 템플릿을 게시