묻고답하기
footer 고정
2016.06.10 23:55
http://hongyeon.dothome.co.kr/xe/
id: temp / pw: temp111
아무리 소스를 찾아봐도 footer가 고정이 잘 안되네요ㅠㅠ
@charset "utf-8";
/* Reset */
html,body{height:100%;}
body{margin:0;}
/* Skin to content */
.skip{margin:0}
.skip>a{display:block;text-align:center;line-height:28px;height:1px;overflow:hidden}
.skip>a:focus{height:auto}
/* Layout */
.container {
float: top;
margin: 0 auto;
width: 100%;
background-color: #fff;
}
.footer {
height: 100%;
width: 100%;
margin: 0 auto;
}
.header{position:relative;
z-index:2;
zoom:1;
margin:0 auto;
width: 100%;
padding-top: 40px;
background-color:#fff;
}
.visual{position:relative;z-index:1;overflow:hidden;width:100%;margin:0 0 20px 0}
.body{position:relative;z-index:1;}
.header:after,.body:after{content:"";display:block;clear:both; height: 100%;}
.content{width: 980px; min-height:100%; margin: 0 auto; margin-top: 50px; margin-bottom: 30px; }
.content img{max-width:100%;height:auto}
/* scroll */
a.back-to-top {
display: none;
width: 48px;
height: 48px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("/xe/img/top.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* Header */
.header>h1{display:inline-block;*display:inline;zoom:1;margin:19px 0}
.header>h1>a,
.header>h1 img{display:block}
.header>h1>a{font-size:32px;text-decoration:none;color:#333}
/* SNS */
.sns {
margin: 0 auto;
width: 1000px;
margin-bottom: 5px;
}
.sns img {
padding-top: 100px;
margin: 0 auto;
padding: 0 auto;
}
.sns a {
color: #666;
font-size: 12px;
font-family: arial;
text-decoration: none;
}
/* Menu */
.menu {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #ffbb00;
width: 100%;
}
/* Footer */
.footer{float: bottom;padding-top: 10px; padding-bottom: 10px;background-color:#b2b2b2;border-top:1px solid #f4f4f4;color:#fff; text-align: center;}
.footer p{font-size:11px}
.footer a{text-decoration:none;color:#666}
.footer a:hover,
.footer a:focus{text-decoration:underline}
/* GNB */
.dp-menu{position:relative;height:50px; width:100%; z-index: 1;
clear:both;text-align: center; margin: 0 auto; background-color: #ffd130;}
.gnb ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #ffd130;
width: 980px;
text-align: center;
}
.gnb ul li {
width: 196px;
float: left;
display: inline;
text-align: center;
padding-top: 18px;
}
.gnb p {
color: white;
text-align: center;
}
.gnb ul li a.dp{
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
vertical-align: middle;
margin-bottom: 18px;
font-weight: bold;
}
.gnb .dropbtn{
display: inline-block;
color: black;
text-align: center;
text-decoration: none;
}
.gnb ul li a:hover, .gnb .dropdown:hover .dropbtn {
color: #000;
}
.gnb ul li.dropdown {
display: inline-block;
}
.dropdown-content {
color: black;
margin: 0 auto;
text-align: center;
display: none;
position: absolute;
min-width: 196px;
}
.gnb ul li .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
padding:5px;
font-weight: bold;
}
.dropdown-content a:hover {
background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
여기서 뭘 건들어야 footer가 고정이 될까요?
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2020/01/31] 묻고답하기 2단메뉴 *2
- [2019/10/20] 묻고답하기 html 사진 슬라이드 질문 *2
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
댓글 8
-
라자루스
2016.06.11 00:20
-
흑사탕
2016.06.11 00:46
오오! 완전 제가 원하는 스타일하곤 조금 벗어나지만.. 그래도 어느정도 해결은 되었네요.
혹시 스크롤할때 따라오지 않게는 못..하나요?8ㅅ8
-
라자루스
2016.06.11 00:59
말씀만으로는 어떤 스타일을 원하시는지 정확히 알기가 어렵네요. 혹시 position: fixed; 대신에 position: absolute;를 넣은 느낌을 원하시는 건가요?
-
흑사탕
2016.06.11 02:03
음... 모니터 사이즈에 따라서 푸터가 콘텐츠 밑으로 달려와가지고
푸터 아래로 공백이 생긴다고 해야할까요... fixed 를 쓰는게 나을거 같긴하네요ㅠ
-
라자루스
2016.06.11 08:56
.container(12라인)에 height: 100%;
.body(34라인)에 height: 100%;
.footer를 position:fixed에서 position: absolute;로 바꿔보세요.
-
흑사탕
2016.06.12 20:21
참고해서 해봤는데... 이상하게 고정되네요...8ㅅ8
http://hyesoo0905.com/Notice 여기 처럼 화면을 크게 하면 푸터가 반응해서 아래로 내려가고 그랬음 좋겠어요~
-
라자루스
2016.06.12 23:27
1. .container에 height: 100% 속성을 추가합니다. (float: top은 삭제하세요.)
2. .body에 height: 100% 속성을 추가합니다.
3. .footer의 height: 100% 속성을 삭제합니다. (float: bottom은 삭제하세요.)
4. .header:after,.body:after의 height: 100% 속성을 삭제합니다.
-
흑사탕
2016.06.14 23:58
우와!! 드디어 먹히네요!!! 정말 감사합니다//ㅅ//
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
홍찬 | css에서 top에 화면 창 가운데라는 값 넣기 [1] | 2016.02.20 by XESTUDIO |
캣대디 | 실시간 새글 알림 애드온 특정게시판만 알림오게하려고 합니다. [5] | 2016.04.18 by 꽃민 |
꽃민 | 관리자만 알림 뜨려면... [2] | 2016.04.19 by 꽃민 |
꽃민 | 새글 알림 도와주세요..ㅠㅠ [2] | 2016.04.19 by 꽃민 |
happy19 | 휴... 배경색 설정만 했을뿐인데, 사이트가 날라갔어요. [1] | 2016.04.22 by YJSoft |
kjmedi626 | 관리자주소를 모르겠습니다...ㅠㅠ [4] | 2016.05.27 by kjmedi626 |
흑사탕 | footer 고정 [8] | 2016.06.14 by 흑사탕 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
마이미2 | 2차 메뉴를 가로로 나타나게 하려고 합니다. [2] | 2016.07.15 by 마이미2 |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
해운대살고싶다 | php 질문드립니다. | |
청*솔 | iframe 으로 붙혀넣기 했는데.! [2] | 2016.09.12 by 청*솔 |
영흥도우럭1 | 실시간 새글 알림 애드온..질문드립니다. | |
샤킹 | 스크롤 버튼 고정하는 방법 알려주세요!! | |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
파도. | 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 | |
쇼퍼 | php 5.16 php 5.2 이상으로 업데이트하기 | |
lifema**** | list.html에서 letter-spacing 수정 문의드립니다 [2] | 2017.03.13 by lifema**** |
쩡님아야 | 게시판과 슬라이드와의 연결고리 | |
영종몬 | 테이블 왼쪽 여백주는방법 [3] | 2017.07.03 by 영종몬 |
footer을 고정한다는 게 화면 내에서 하단에 고정시키고 싶다는 얘기신가요? .footer 에서 height: 100%는 빼버리시고 position: fixed; bottom:0; 을 넣어보세요.