header, footer를 높이를 고정한 3단 형태 flex로 구성 (CSS)
2021-01-15 10:43 - swindler
<body>
<div style="display:flex; min-height: 100vh; flex-direction: column;">
<div style='height:50px; background:gray;'>header</div>
<div style='flex:1;'>
main-content
</div>
<div style='height:100px; background:gray;'>footer</div>
</div>
</body>
wrapper에서 height:100%를 사용하면 화면 전체를 사용하게 되므로,
viewport단위인 100vh를 사용한다.
flex에서 크기를 넘치는 속성을 줄이는 1, 모자른 속성을 채우는 1, 해당 속성을 유지하는0,
rmfotj flex: 1 1 0 를 줄여서 flex: 1 이라고 사용함
<div style="display:flex; min-height: 100vh; flex-direction: column;">
<div style='height:50px; background:gray;'>header</div>
<div style='flex:1;'>
main-content
</div>
<div style='height:100px; background:gray;'>footer</div>
</div>
</body>
wrapper에서 height:100%를 사용하면 화면 전체를 사용하게 되므로,
viewport단위인 100vh를 사용한다.
flex에서 크기를 넘치는 속성을 줄이는 1, 모자른 속성을 채우는 1, 해당 속성을 유지하는0,
rmfotj flex: 1 1 0 를 줄여서 flex: 1 이라고 사용함
Copyright © 1999-2020, swindler.