CSS - HTML 페이지 바닥글을 최소 높이로 페이지 하단에 유지하되 페이지와 겹치지 않도록 합니다.
다음 있습니다. (데드링크: 데있다습니가크지링페드이다음데:▁((▁i다크니:http://www.workingstorage.com/Sample.htm페이지 하단에 배치할 수 없는 바닥글이 있습니다.
바닥글을 다음과 같이 지정
- 페이지가 짧고 화면이 채워지지 않을 때 창 하단에 붙습니다.
- 화면 가득 내용이 있을 때(내용이 중복될 가능성이 있음) 문서 끝에 머무르며 정상적으로 아래로 이동합니다.
CSS는 유전되고 나를 혼란스럽게 합니다.내용물에 최소 높이를 두거나 바닥글이 아래로 내려가도록 제대로 변경할 수 없는 것 같습니다.
아래에는 4가지 다른 나의 방법이 있습니다.
각 예제에서 텍스트는 다양한 시나리오에서 콘텐츠가 어떻게 렌더링되는지 설명하기 위해 자유롭게 편집할 수 있습니다.
플렉스박스
body{ min-height: 100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>그리드
body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>의 이 의이방트다을배음치 "릭여니합 "하다사용 "아을은 "래법""를 "합니다.::after 종교element의 의사 .body바닥글의 정확한 높이로 설정하여 바닥글과 동일한 공간을 차지하도록 합니다. 그래서 바닥글이 다음과 같을 때absolute바닥글 위에 위치하면 바닥글이 실제로 공간을 차지하는 것처럼 보이고 절대 위치 지정의 부정적인 영향을 제거합니다(예: 본문 내용 검토).
3)position:absolute(동적 바닥글 높이 없음)
body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>테이블 레이아웃
html{ height:100%; }
body { min-height:100%; margin:0; }
header {
height: 50px;
background: lightcyan;
}
article {
height: 1%;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
body > footer {
display: table-row;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body> 것입니다.100%에서, , 리고그로.min-height100%바닥글의 높이가 변경되지 않는 경우에도 작동합니다.
바닥글에 음의 여백 상단을 지정합니다.
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
브라우저 간에 효과적으로 작동하는 매우 간단한 접근 방식은 다음과 같습니다.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
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;
}<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>고정된 높이나 요소의 위치 변경을 가정하지 않는 매우 간단한 플렉스 솔루션입니다.
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
브라우저 지원
IE11 이하를 제외한 모든 주요 브라우저.
적절한 접두사에 자동 접두사를 사용해야 합니다.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
/////////////////////////////////////////////
body,
html {
margin: 0;
padding: 0;
}
header,
main,
footer {
margin: 0;
display: block;
}
header,
footer {
min-height: 80px;
}
header {
background-color: #ccc;
}
main {
background-color: #f4f4f4;
}
footer {
background-color: orange;
}<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>저는 이것을 바닥에 붙이는 데 사용했고 그것은 저에게 효과가 있었습니다.
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
이고, 에서 수정해야 하는 것은 입니다. 추가합니다.div"allButFooter"수업시간에 저는 모든 페이지, 너무 짧은 페이지로 했습니다. 바닥글이 바닥에 붙지 않을 것이라는 것을 알고 있었고, 또한 스크롤해야 한다는 것을 이미 알고 있었습니다.페이지의 내용이 동적인 경우에도 잘 작동한다는 것을 알 수 있도록 이렇게 했습니다.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
그"allButFooter"수업이 있습니다.min-height값(뷰포트 높이100vh뷰포트 높이의 100%를 의미합니다.) 및 바닥글의 높이는 이미 알고 있었습니다.40px.
제가 한 일은 그게 전부였고, 제게 완벽하게 효과가 있었습니다.파이어폭스, 크롬, 엣지만 빼고 모든 브라우저에서 시도해본 적이 없고 결과는 제가 원하는 대로였습니다.바닥글은 맨 아래에 고정되므로 z 인덱스, 위치 또는 다른 속성을 사용할 필요가 없습니다.제 문서에 있는 모든 요소의 위치는 기본 위치였고, 절대 위치나 고정 위치 등으로 변경하지 않았습니다.
반응성이 뛰어난 설계
여기 제가 정리하고 싶은 것이 있습니다.은 제가 40px를 사용하여 반응형 디자인 할 때 Twitter-Bootstrap함수에서 뺄셈한 값을 수정해야 했습니다.
.allButFooter {
min-height: calc(100vh - 95px);
}
이은아마 때문일 것입니다.Twitter-Bootstrap자체 마진과 패딩이 함께 제공되기 때문에 그 값을 조정해야 했습니다.
IE7 이후부터는 간단히 사용할 수 있습니다.
#footer {
position:fixed;
bottom:0;
}
지원은 캐니유즈를 참조하십시오.
Flexbox를 사용하여 바닥글을 맨 아래로 유지
<div style="min-height:100vh; display:flex; flex-direction:column;
justify-content:space-between;">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>메모
모든 것을 포장하고 있는지 확인합니다.
<div>과 같은 스타일을 다른 : 또는다음같과은 CSS 블록레른벨소요다:min-height:100vh; display:flex; flex-direction:column; justify-content:space-between;.바닥글 요소를 제외한 모든 요소를 다음으로 묶어야 합니다.
<div>또는 다른 블록 레벨 요소.사용하세요.
<footer>또는 바닥글을 감쌀 다른 블록 수준 요소.
코드 설명
min-height: 100vh.flex-direction: column에서는 쌓인 블록 요소를 유지한다는 측면에서 정상적인 문서 흐름의 동작을 유지합니다(본문의 직접 자식이 모두 실제로 블록 요소라고 가정).justify-content:space-between바닥글을 화면 맨 아래로 밀어넣습니다.
부트스트랩 5 - 링크를 사용하여 동일한 방법(바닥글을 하단에 유지)을 확인합니다.
IE8+에서 작동하는 간단한 솔루션
html에서 최소 높이:100%를 지정하여 내용이 적으면 페이지가 전체 뷰포트 높이를 차지하고 페이지 하단에 바닥글 스틱을 부착합니다.내용이 증가하면 내용과 함께 바닥글이 아래로 이동하고 아래로 계속 이동합니다.
JS 피들 작업 데모: 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>
하지만 또 다른 정말 간단한 해결책은 다음과 같습니다.
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
요령은 다음을 사용하는 것입니다.display:table 및 전체문와서에 .display:table-row와 함께height:0바닥글용.
표시됩니다.table-row페이지 하단에 렌더링됩니다.
수행
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
모든 최신 브라우저에서 지원되는 Flex에 대해서도 읽을 수 있습니다.
업데이트 : flex에 대한 내용을 읽고 시도해 보았습니다.그것은 나에게 효과가 있었다.그것이 당신에게도 같은 일이 되기를 바랍니다.구현 방법은 다음과 같습니다.여기 남은 것은 ID가 아니라 div입니다.
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
여기에서 Flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 에 대한 자세한 내용을 읽을 수 있습니다.
이전 버전의 IE에서는 지원되지 않습니다.
이를 스티커 바닥글이라고 합니다.구글에서 검색하면 많은 결과가 나옵니다.CSS 스틱 푸터는 제가 성공적으로 사용한 것입니다.하지만 더 있습니다.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>footer {
margin-top:calc(5% + 60px);
}
이것은 잘 작동합니다.
한 가지 주의해야 할 것은 모바일 장치입니다. 모바일 장치는 뷰포트의 개념을 '비정상적인' 방식으로 구현하기 때문입니다.
이와 같이, 사용하기position: fixed;(다른 곳에서 제가 추천한 것처럼) 보통은 그렇게 되지 않습니다.물론, 그것은 당신이 추구하는 정확한 행동에 달려 있습니다.
데스크톱과 모바일에서 사용하고 잘 작동하는 것은 다음과 같습니다.
<body>
<div id="footer"></div>
</body>
와 함께
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
나한테 효과가 있어요.
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>저는 여기서 비슷한 질문에 답했습니다.
저는 웹 개발에 꽤 익숙하지 않습니다. 그리고 저는 이것이 이미 답이 되었다는 것을 압니다. 하지만 이것이 제가 그것을 해결하기 위한 가장 쉬운 방법이고 저는 어떻게든 다르다고 생각합니다.웹 앱 바닥글의 높이가 동적이어서 FlexBox와 스페이서를 사용하게 되었기 때문에 유연한 것을 원했습니다.
- HTML 및 본문의 높이를 설정하는 것으로 시작합니다.
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
는 제생라고 가정합니다column머리글, 영웅 또는 수직으로 정렬된 콘텐츠를 추가해야 하는 경우 우리 앱의 동작.
- 스페이서 클래스 만들기
.spacer {
flex: 1;
}
- 그래서 나중에 HTML에 다음과 같은 것이 있을 수 있습니다.
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
https://codepen.io/anon/pen/xmGZQL 에서 사용할 수 있습니다.
페이지 내용이 창 높이보다 작으면 페이지 하단에 바닥글을 배치하고, 그렇지 않으면 내용 뒤에 바닥글을 배치합니다.
또한 다른 코드보다 먼저 코드를 자체 인클로저에 보관하면 바닥글의 위치를 변경하는 데 걸리는 시간이 줄어듭니다.
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
CSS 그리드를 사용하여 기본적으로 3개의 행을 정의했습니다.
- 머리글
- 내용물
- 바닥글
크기를 정의하는 데 사용되는 그리드는 다음과 같이 행 끝에 바닥글을 정렬하는 것입니다.
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML 파일
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
더 많은 행을 사용할 수 있지만 CSS에 를 추가하거나 모든 행을 div로 묶는 것을 기억하십시오.
여기 이 가이드는 제가 이 문제를 해결하는 데 정말 도움이 되었습니다.
은 야합다니해를 사용해야 .position: absolute;그렇다면 이것은 중요합니다.bottom:0
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
부트스트랩을 사용한 한 줄 솔루션
제공되는에도, CSS와 jQuery는 다음과 .
본문 태그에 단일 클래스 선언이 있는 부트스트랩을 사용하는 솔루션을 나열했습니다.d-flex flex-column justify-content-between
- 이는 바닥글의 높이를 미리 알 필요가 없습니다.
- 이것은 절대 위치를 설정할 필요가 없습니다.
- 이것은 작은 화면에서 오버플로우되는 동적 디브와 함께 작동합니다.
html, body {
height: 100%;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="d-flex flex-column justify-content-between text-white text-center">
<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>기본 내용을 뷰포트 높이로 설정할 수 있으므로 내용이 초과되면 기본 내용의 높이가 바닥글의 위치를 정의합니다.
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: red;
}
main {
background: blue;
/* This is the most important part*/
height: 100vh;
}
footer{
background: black;
height: 50px;
bottom: 0;
}<header></header>
<main></main>
<footer></footer>저는 이 문제를 직접 조사해 왔습니다.저는 꽤 많은 해결책들을 보아왔고 각각의 해결책들은 종종 마법의 숫자들과 관련된 문제들을 가지고 있었습니다.
그래서 다양한 소스의 모범 사례를 사용하여 다음과 같은 솔루션을 개발했습니다.
http://jsfiddle.net/vfSM3/248/
여기서 제가 특별히 이루고 싶었던 것은 녹색 영역 안에서 바닥글과 머리글 사이를 스크롤하는 주요 내용을 얻는 것이었습니다.
여기 간단한 CSS가 있습니다.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
내가 한 일
HTML
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
고정된 절대 위치를 사용할 필요가 없습니다.그냥 html을 적절한 방법으로 쓰세요.
당신은 이걸 할 수 있다.
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
치fixed와 함께bottom,left,그리고.right0으로 설정하면 작업이 가장 적합합니다.
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
치absolute바닥에 붙지는 않지만,fixed 그렇습니다.
바닥글 섹션을 사용자 지정하기만 하면 됩니다.
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
사실 매우 간단합니다.이 솔루션은 바닥글 높이를 알 필요가 없습니다.
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
다른 솔루션과 비교하여 용기를 추가할 필요가 없습니다.따라서 이 솔루션은 좀 더 우아합니다.코드 예제 아래에서 이것이 작동하는 이유를 설명하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
그래서 우리가 하는 첫 번째 일은 가장 큰 컨테이너(html)를 100% 만드는 것입니다.html 페이지는 페이지 자체만큼 큽니다.다음에 바디 높이를 설정하면 html 태그의 100%보다 클 수 있지만, 적어도 크기는 커야 하기 때문에 최소 높이를 100% 사용합니다.
우리는 또한 몸을 상대적으로 만듭니다.상대적이란 블록 요소를 원래 위치에서 상대적으로 이동할 수 있다는 것을 의미합니다.하지만 여기서는 사용하지 않습니다.왜냐하면 친척은 두 번째 용도가 있기 때문입니다.모든 절대 요소는 루트(html) 또는 첫 번째 친척 부모/조부모에 절대적입니다.그것이 우리가 원하는 것입니다. 우리는 바닥이 신체, 즉 바닥에 상대적으로 절대적이기를 원합니다.
마지막 단계는 바닥글을 절대 및 bottom:0으로 설정하여 상대적인 첫 번째 부모/조부모(물론 본문)의 맨 아래로 이동하는 것입니다.
우리는 아직도 해결해야 할 문제가 하나 있습니다. 전체 페이지를 채우면 내용이 바닥글 아래로 이동합니다. 왜 그럴까요?바닥글이 더 이상 "html 흐름" 안에 없기 때문입니다. 절대적이기 때문입니다.그럼 이걸 어떻게 고칠까요?우리는 바디에 패딩 하의를 추가할 것입니다.이것은 신체가 실제로 내용물보다 더 큰 것을 확실히 합니다.
비슷한 답변을 많이 찾았지만 바닥글이 항상 맨 아래에 있고 기존 데이터 위에 표시되지 않는 위치를 찾을 수 있는 유일한 해결책은 다음과 같습니다.
footer {
position: relative;
clear: both;
}
html, 본문 및 바닥글을 제외한 다른 행을 100%로 설정하기만 하면 됩니다.예
<body>
<header></header>
<content></content>
<footer></footer>
html, body, header, content{
height:100%;
}
언급URL : https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b
'sourcecode' 카테고리의 다른 글
| 기존 사용자 정의 테마를 사용하여 XML에서 활동의 제목 표시줄을 숨기는 방법 (0) | 2023.06.12 |
|---|---|
| Google Firebase 오류(정의되지 않은 함수가 반환됨, 예상 약속 또는 값) (0) | 2023.06.12 |
| 경골의 모든 행 표시/인쇄(tbl_df) (0) | 2023.06.12 |
| 출력 파일에 로그를 쓰는 중이 아닙니다. (0) | 2023.06.12 |
| Angular 6 날짜별 객체 배열 정렬 (0) | 2023.06.12 |