일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Archives
- Today
- Total
Tags
- transform 효과
- CSS3 효과
- ie7 inline
- Number 객체
- ie7 핵
- css3
- float 깨짐
- 한빛미디어
- footer 고정
- css 줄바꿈
- Object 객체
- zoomin 효과
- transform 전환효과
- display:inline-block
- css로 줌인 효과 주기
- 속성 scale
- Array 객체
- html br
- CSS
- CSS 효과주기
- zoom:1
- 모던 웹을 위한 JavaScript + jQuery 입문
- String 객체
- 레이아웃 잡기
- html 줄바꿈
- 코딩 예제
- Math 객체
- HTML
- 속성 ease
- Date 객체
마크업개발 메모장
html css로 footer 하단에 고정하기 본문
footer를 하단에 고정하는 방법을 검색하면 여러가지 방법이 나오는데
테스트 해본 결과로 이 방법이 제일 좋은것 같다.
footer를 absolute로 주는 방법!!
0311 내용 추가) 직접 작업해보니 생각해봐야 할 부분이 있다.
1. 이 코드에서는 #content가 position:absolute 면 안된다.
position은 header와 footer에만 사용하고 content는 default로 가는게 좋다.
어쩔수 없이 content에 position을 사용해야 한다면 absolute와 relative 2개의 클래스를 만들고 작업하는게 좋을듯 하다.
그리고 content가 absolute일때는 이 방법이 아닌 다른 방법으로 footer를 붙여야 한다.
2. #content와 #footer 사이에 여백 주기가 힘들다면 (이미 작업을 마쳤는데 수정해야할때 등의 경우)
#footer에 bottom:-100px;로 사이 여백을 주자.
수치는 디자인에 맞게 맞춘 후 bottom이 기준이므로 -로 줘야 한다.
-로 주지 않으면 bottom(아래)에서 100만큼 위로 올라가게 된다.
자세한 설명은 이곳에서 :
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
'HTML/CSS' 카테고리의 다른 글
br 사용 안하고 white-space로 줄바꿈 하기 (0) | 2015.03.21 |
---|---|
ie7에서 inline-block 사용하기 (0) | 2015.03.12 |
CSS3 animation를 이용한 이미지 움직이기 (0) | 2014.11.19 |
CSS3 transition 속성 (0) | 2014.11.17 |
푸터 하단 고정방법 (0) | 2014.08.28 |