[CSS 스타일 샘플] 일러두기, 페이지 아래에 글자 배치

 

일러두기는 글자를 아래로 배치해야 하는데,

이게 많이 까다롭습니다.

 

height : 100%;는 먹히지 않습니다.

뷰어의 높이를 height는 감지할 수 없기 때문이지요.

그래서 뷰오 높이를 기준으로 height를 잡을 수 있는 vh를 사용합니다.

 

하지만 vh는 디스플레이의 크기이기 때문에

뷰어의 설정에 따라 100vh가 다음페이지로 넘어갈 수 있습니다.

그래서 대략 80vh를 사용했어요.

 

그런데 이보다 간단한 코드가 있습니다.

 

.box_note {

  position : fixed;

  bottom : 5em;

  margin : 1em;

}

 

이렇게 상자를 만든 후 텍스트를 넣으면 화면 하단에 배치됩니다.

 

이 코드도 완벽하지는 않습니다.

몇가지 문제가 있어요.

그래도 지금까지 찾은 코드 중 가장 간단한 스타일 코드입니다.