4,476,237 th visitor since 2017.2.1 ( Today : 6962 )
Programming
No. 816
Name. swindler
Subject. header, footer를 높이를 고정한 3단 형태 flex로 구성
Main Cate. CSS
Sub Cate.
Date. 2021-01-15 10:43
Hit. 917 (121.134.199.74)
File.
<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 이라고 사용함





[바로가기 링크] : http://coolx.net/cboard/develop/816



Name
Password
Comment
Copyright © 1999-2017, swindler. All rights reserved. 367,611 visitor ( 1999.1.8-2004.5.26 ), 2,405,771 ( -2017.01.31)

  2HLAB   2HLAB_Blog   RedToolBox   Omil   Omil_Blog