coolx.net

COOLX World

5,754,988 th visitor since 2017.2.1 ( Today : 531 )

Programming

No.

816

Name.

swindler

Subject.

header, footer를 높이를 고정한 3단 형태 flex로 구성

Main Cate.

CSS

Sub Cate.

Date.

2021-01-15 10:43

Hit.

1240 (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


[Modify] [Delete]		[Reply] [List]