나는 이것에 대해 나온 대부분의 질문을 읽었지만 작동하지 않는 것 같습니다. 특히이 두 가지는 내가 추구 한 것처럼 보였지만 바닥 글이 뷰포트 하단에 고정되는 것을 원하지 않습니다.
바닥 글을 항상 페이지 하단에 유지하는 방법은 무엇입니까?
html5에서 화면이 아닌 페이지 하단에 항상 유지하는 방법
여기 내 HTML이 있습니다. Laravel 5.3의 Blade 템플릿 엔진에서 빌드 중이지만 Bootstrap을 사용합니다.
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #d3e0e9;
overflow: auto;
padding: 5px 0 5px 0;
p {
margin: 0px;
}
}<footer class="footer">
<div class="container">
<p>Stuff</p>
</div>
</footer>편집 : 내가 여기에서 요구하는 것을 명확히하려고 시도하고 뷰포트 크기 변경에 대한 위의 참조를 제거했습니다. 그것은 혼란의 원인이며 궁극적으로 내가 요청하는 것과 관련이 없습니다.
fixed당분간 테이블을 제거 할 수 있습니다 . 그게 해결책이 될 수는 없습니다. 내용에 관계없이 항상 뷰포트 하단에 바닥 글이있는 것은 아닙니다.
뷰포트가 데스크톱에서 항상 전체 화면이라고 가정합니다.
첫 페이지 1에는 내용이 거의없고 내용 아래에 바닥 글이 있다고 가정합니다.
Relative 바닥 글 하단과 뷰포트 하단 가장자리 사이에보기 흉한 간격을 남깁니다.
Absolute아래쪽 테두리에 맞 춥니 다. 내용이 거의없는 페이지에 적합한 옵션 인 것 같습니다.
이제 동일한 바닥 글이있는 새 페이지를 가정하지만 브라우저에 여러 페이지 스크롤이있는 수많은 콘텐츠가 있습니다.
Absolute (적어도 내가 사용할 때) 콘텐츠 아래가 아닌 뷰포트 하단에 머무르는 경향이 있습니다.
Relative 내용 아래에 놓고이 문제에 대한 해결책이 될 것입니다.
그러나 이제는 콘텐츠가 거의없는 페이지에서는 작동하지 않습니다.
이 두 가지를 혼합해야하는 것 같지만 유일하게 생각 나는 것은 JQuery를 사용하여 콘텐츠가 뷰포트의 하단 가장자리를 통과하는지 테스트하는 것입니다. 그렇다면 CSS를 기본 절대 값에서 상대 값으로 변경하십시오.
CSS만으로 이것을 달성하는 더 쉬운 방법이있을 것 같습니다.
https://jsfiddle.net/jxg3c6ue/
상대-절대 위치 관계를 사용하는 경우. 그러나 나는 이러한 프로그래밍 방식에 대해 조언하지 않을 것입니다. 미디어 쿼리는 프로젝트에 가장 적합합니다. 그러나 나는 그것이 다른 방법으로 어떻게 할 수 있는지에 대해 대답합니다.
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p>
</div>
<footer>
this is a footer
</footer>내용없이
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}<div class="body">
</div>
<footer>
this is a footer
</footer>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다