바닥 글 (div)을 페이지 하단에 맞추는 방법은 무엇입니까?
이 질문에 이미 답변이 있습니다.
누구든지 바닥 글 div를 페이지 하단에 정렬하는 방법을 설명 할 수 있습니다. 내가 본 예제에서 페이지를 스크롤 한 위치에 관계없이 div가 맨 아래에 표시되도록 만드는 방법을 모두 보여줍니다. 나는 그것을 원하지 않지만. 페이지 하단에 고정되어 움직이지 않게하고 싶습니다. 도움을 주셔서 감사합니다!
최신 정보
내 원래 대답은 오래 전의 것이며 링크가 끊어졌습니다. 계속 유용하도록 업데이트합니다.
업데이트 된 솔루션을 인라인으로 포함하고 JSFiddle에 대한 작업 예제를 포함하고 있습니다. 참고 : CSS 재설정에 의존하고 있지만 이러한 스타일을 인라인으로 포함하지는 않습니다. normalize.css를 참조하십시오.
솔루션 1-여백 오프셋
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
솔루션 2-Flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
다음은 더 자세한 설명과 다양한 접근 방식이있는 링크입니다.
- https://css-tricks.com/couple-takes-sticky-footer/
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
- http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
원래 답변
너가 말하는게 이거니?
http://ryanfait.com/sticky-footer/
이 방법은 15 줄의 CSS와 HTML 마크 업을 거의 사용하지 않습니다. 더 좋은 점은 완전히 유효한 CSS이며 모든 주요 브라우저에서 작동합니다. Internet Explorer 5 이상, Firefox, Safari, Opera 등.
이 바닥 글은 페이지 하단에 영구적으로 유지됩니다. 즉, 콘텐츠가 브라우저 창의 높이보다 크면 바닥 글을 보려면 아래로 스크롤해야하지만 콘텐츠가 브라우저 창의 높이보다 작 으면 바닥 글이 아래쪽에 고정됩니다. 페이지 중간에 떠있는 대신 브라우저 창의
구현에 도움이 필요하면 알려주세요. 이게 도움이 되길 바란다.
이렇게하면 div가 페이지 하단에 고정되지만 페이지가 긴 경우 아래로 스크롤 할 때만 표시됩니다.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
바닥 글이 콘텐츠 위에 표시되지 않도록 높이와 여백 상단이 동일해야합니다.
제목과 주석은 고정 바닥 글을 찾고 있지 않다는 것을 의미합니다 (콘텐츠가 아래로 스크롤 될 때 창의 맨 아래에 고정됨). 콘텐츠가 창을 채우지 않으면 창 하단으로 강제로 이동하는 바닥 글을 찾고, 콘텐츠가 창 경계를 초과하면 콘텐츠 하단으로 밀어 넣는 것으로 가정합니다.
다음을 통해이를 수행 할 수 있습니다.
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>이것을 확인하고, firefox와 IE에서 작동합니다.
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
사용 <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. 바닥 글이 위로 올라가지 않습니다.
내가 사용하는 간단한 솔루션은 IE8 +에서 작동합니다.
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
I am a newbie and these methods are not working for me. However, I tried a margin-top property in css and simply added the value of content pixels +5.
Example: my content layout had a height of 1000px so I put a margin-top value of 1005px in the footer css which gave me a 5px border and a footer that sits delightfully at the bottom of my site.
Probably an amateur way of doing it, but EFFECTIVE!!!
참고URL : https://stackoverflow.com/questions/3525581/how-to-align-footer-div-to-the-bottom-of-the-page
'programing' 카테고리의 다른 글
| 서버 측에서 Android 앱 구매를 확인하는 방법 (앱 결제 v3의 Google Play) (0) | 2020.10.16 |
|---|---|
| Erlang 프로그래밍을위한 좋은 IDE는 무엇입니까? (0) | 2020.10.16 |
| 인쇄되지 않고 배쉬 세트 + x (0) | 2020.10.16 |
| "현대적인"Objective-C에서 iVar를 어디에 배치해야합니까? (0) | 2020.10.16 |
| 기본 int 목록을 만드시겠습니까? (0) | 2020.10.16 |