CSS 배치 가이드 라인을 머리에 쓰려고합니다. 나는 끈적 거리는 꼬리말을 만드는 방법을 알아 내려고했지만 주 내용 영역이 더 이상 응축 될 수 없을 때 끈적 거리는 것을 멈추게하려고합니다. 내가 말하는 것에 대한 예가 여기 http://ryanfait.com/sticky-footer/에서 찾을 수 있습니다. 어떤 사람이 나에게 왜 꼬리말이 끈적 거리는 것을 멈추고 특히 CSS 속성으로 인해 이런 현상이 발생하는지 설명 할 수 있습니까? 나를 위해 CSS를 보았을 때 바닥 글이 브라우저 창 하단에 항상 붙어있는 것처럼 보이지만 여기서는 그렇지 않습니다. 왜?CSS 자동 높이 및 고정 바닥 글
도움 주셔서 감사합니다.
이 하나의 시도를 부여해야 바닥 글 및 여백 탑에 대한 몇 가지 height을 제공해야합니다. http://www.cssstickyfooter.com/ (링크가 더 이상 유효하지 않음)
Ryan의 것과 비슷하지만, 기억에서 볼 때이 두 가지가 매우 유사하지만 더 나은 행운이라고 생각합니다.
당신은 래퍼의 외부 바닥 글을 선언하고 -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
다음은 끈끈한 바닥 글이 필요한 프로젝트의 기초로 상당히 일관되게 사용하는 레이아웃의 간략한 요약입니다. 처음에는 모든 코드를 어디에서 가져 왔는지는 확실하지 않지만 꽤 오랜 시간에 걸쳐 함께 코드화되었습니다.
http://jsfiddle.net/biznuge/thbuf/8/
당신은 당신이 페이지 전체를 감싸는 것 '#container'요소를 필요로하는 바이올린에서 볼 수 있어야합니다. 이것은 당신에게 100 % 높이를 준다. (css에있는 ie에 대한 해킹에주의하라.) 그리고이 'container'엘레멘트의 자식 (child) 엘레멘트는 그것으로부터 높이 또는 위치를 파생시킬 수있다. 이 방법의
주의 할 점은 다음과 같습니다 바닥 글이 더 변위 있도록
행운을 비네!
연결 한 사이트가 다운되어 있으므로 일부 코드를 제공해주십시오. – shivgre
LOL - 6 년 반 전의 일입니다. 링크가 더 이상 유효하지 않다는 사실에 놀랐습니까? 프론트 엔드 개발의 모든 기능과 마찬가지로 Flexbox 및 CSS 그리드와 같은 새로운 기술로 대체되었습니다. 따라서 오래된 코드를 재 게시 할 필요가 없습니다! – swisstony
그래도 좋은 지적이지만 오래된 코드 로직은 오래된/더 이상 유효하지 않더라도 힌트를 제공 할 수 있습니다. 커뮤니티 지점에서부터 링크가 아니라 대답으로 실제 코드를 갖는 것이 더 합리적입니다. @swisstony 그래서 내가 upvote 수 편집 할 :) – shivgre