화면 하단에 바닥 글을 유지하는 방법

화면 하단에 바닥 글을 유지하는 방법

---

이 질문에 이미 답변이 있습니다.

• 바닥 글을 웹 페이지 하단에 유지하려면 어떻게해야합니까? 25 답변
• HTML 페이지 바닥 글을 최소 높이로 페이지 하단에 유지하지만 페이지 22 답변과 겹치지 않도록하는 CSS

해당 웹 페이지에 표시 할 콘텐츠 / 텍스트가 거의없는 경우 바닥 글이 웹 페이지의 절반이 아닌 브라우저 창 하단에 표시되도록 웹 페이지를 설정하는 가장 좋은 방법은 무엇입니까?

---

당신이 찾고있는 것은 CSS Sticky Footer 입니다.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px;
  /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}


/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

---

당신은 사용할 수 있습니다 position:fixed;로 bottom.

예 :

#footer{
 position:fixed;
 bottom:0;
 left:0;
}

---

HTML

<div id="footer"></div>

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}

---

position : fixed 및 bottom : 0을 설정하여 항상 브라우저 창 하단에 위치하도록합니다.

---

Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.

css:

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

Here is the html main content.

<div class="footer"> Here is the footer. </div>

---

use this style

min-height:250px;
height:auto;

참고URL : https://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen