컨테이너 하단에 div를 어떻게 배치 할 수 있습니까?

741

다음과 같은 HTML이 주어진다 :

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
스 니펫 확장

#copyright의 바닥에 붙어 싶습니다 #container.

절대 위치 지정을 사용하지 않고이를 달성 할 수 있습니까? float 속성이 'bottom'값을 지원하면 트릭을 수행하는 것처럼 보이지만 불행히도 그렇지 않습니다.

html  css 
— 도날
소스
211
이 상황은 레이아웃 테이블이 아직 사라지지 않은 이유 중 하나입니다. 테이블로 이것을하는 것은 간단하고 어디에서나 작동합니다. CSS에서이 작업을 수행하는 것은 매우 어렵고 브라우저 간 지원은 그렇게 어렵습니다. 그것을 올바르게하는 방법을 기억하는 것은 불가능하다는 것은 물론이다.
— Tomalak
질문을 이해하지 못합니다. 왜 절대 위치를 사용해야합니까? 컨테이너에 포함 된 내용에 관계없이 컨테이너의 높이가 설정되어 있습니까?
— HartleySan

답변:

921

아마 아닐 것입니다.

할당 position:relative에 #container, 다음 position:absolute; bottom:0;에 #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
스 니펫 확장

— 사용자
소스
10
컨테이너의 position : relative가 디자인을 손상시키는 경우 컨테이너 내부에 래퍼 div를 100 % 높이로 포함시키고 대신 position : relative를 추가 할 수 있습니다.
— 잭 셰퍼드
그리고 그것이 반복 요소를위한 것이라면, 그렇지 않으면 서로 위에 위치합니까?
— CRice
6
절대 위치 요소는 위치를 결정하기 위해 절대 또는 상대적 위치 인 가장 가까운 부모를 찾습니다. 모든 것이 실패하면 그것은 몸 (창)에 의지합니다. 그러므로 부모가 상대적이어야합니다.
— user17753
1
페이지 내용에 대한 저작권을 방지하기 위해
— #container에
1
아래 Flexbox 접근 방식이 훨씬 좋습니다.
— woohoo
345

실제로 @User가 허용하는 대답은 창이 길고 내용이 짧은 경우에만 작동합니다. 그러나 내용이 키가 크고 창이 짧으면 페이지 내용 위에 저작권 정보를 넣은 다음 아래로 스크롤하여 내용을 확인하면 떠 다니는 저작권 표시가 나타납니다. 따라서이 솔루션은 대부분의 페이지 (실제로이 페이지와 같이)에 쓸모가 없습니다.

이 작업을 수행하는 가장 일반적인 방법은 "CSS sticky footer"접근 방식 또는 약간 더 작은 변형입니다. 고정 높이 바닥 글이있는 경우이 방법이 효과적입니다.

내용이 너무 짧은 경우 창의 맨 아래에 나타나고 창이 너무 짧은 경우 내용의 맨 아래에 표시되는 가변 높이 바닥 글이 필요한 경우 어떻게해야합니까?

자존심을 삼키고 테이블을 사용하십시오.

예를 들면 다음과 같습니다.

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
스 니펫 확장

사용해보십시오. 이것은 모든 브라우저에서 모든 창 크기, 모든 양의 콘텐츠, 모든 크기의 바닥 글, 심지어 IE6에서도 작동합니다.

레이아웃에 테이블을 사용한다는 생각에 울부 짖는 경우 잠시 이유를 물어보십시오. CSS는 우리의 삶을 더 편하게 만들어 주어야했고 전반적으로 그랬습니다. 그러나 사실이 세월이 지난 후에도 여전히 깨지고 반 직관적 인 혼란에 빠졌습니다. 모든 문제를 해결할 수는 없습니다. 불완전합니다.

테이블은 시원하지 않지만 적어도 현재로서는 디자인 문제를 해결하는 가장 좋은 방법입니다.

— 릭 라일리
소스
80
나에게 가장 좋은 답변 인 것 같습니다. 또한 html 테이블 대신 항상 "css 테이블"(display : table [-row / -cell])을 사용할 수 있습니다. 시맨틱없이 동일한 레이아웃을 제공합니다.
— chiccodoro
1
페이지를 생성하는 PHP 스크립트 / 기타 스크립트가있는 경우 하나를 숨겨진 "스페이서"로 사용하고 하나는 절대로 배치하여 바닥 글을 복제 할 수 있습니다. 스페이서 바닥 글은 바닥 글의 내용이 아무리 많아도 페이지 위로 올라가지 않도록합니다.
— Tyzoid
20
이 의견을 읽는 다른 사람들에게 : 이것은 "교만"이나 "쿨"과는 아무 관련이 없습니다. 레이아웃에 테이블을 사용하는 것은 특히 많은 양의 콘텐츠에 대해 훨씬 더 고통 스럽습니다. 콘텐츠를 추가 할 때 td를 놓치지 않고 너무 관련이없는 마크 업을 선별하는 것은 지옥입니다. 레이아웃뿐만 아니라 HTML 문서를 작성하는 것은 고통스러운 원인 이며, 문서의 내용 대부분이 테이블 형식의 데이터가 아닌 경우 왜 테이블에 넣는가? 웹 기술을 의도 한대로 사용하는 것을 좋아하지 않는다면 왜 사용합니까? 대신 데스크탑 / 모바일 앱을 사용하여 컨텐츠를 게시하십시오
— gabe
1
@chiccodoro 놀랍게도 최소한의 테이블리스 동등 물을 구현했습니다. 아래 답변을 확인하십시오
— Hashbrown
59
교만은 무관합니다. 접근성으로 인해 테이블을 레이아웃에 사용해서는 안됩니다. 스크린 리더를 사용해 본 적이 있다면 테이블 형식의 데이터에만 테이블을 사용해야하는 이유를 알 수 있습니다. CSS 테이블을 @chiccodoro 상태로 사용하십시오.
— 매트 펠로우
170

flexbox 접근 방식!

에서 지원되는 브라우저 , 당신은 다음을 사용할 수 있습니다 :

여기 예

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

코드 스 니펫 표시

위의 솔루션은 아마도 더 융통성이 있지만 대체 솔루션은 다음과 같습니다.

여기 예

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

코드 스 니펫 표시

참고로 추가 지원을 위해 공급 업체 접두사를 추가 할 수 있습니다.

— 조쉬 크로 지어
소스
3
방법에 대한 column-reverse부모에, 그래서 당신은 전혀 아이에게 무엇을 추가 할 필요가 없습니다?
— Max Waterman
1
이것은 아마도 받아 들일만한 대답이어야합니다-해킹, 절대 위치 지정 없음, 오버플로가 필요할 때 깨끗하게 작동합니다 (나를 위해).
— Adverbly
114

예.absolute 위치를 지정하지 않고 tables (마크 업 등 을 사용하여 나사)를 사용 하지 않고도이 작업을 수행 할 수 있습니다 .

데모
이것은 IE> 7, 크롬, FF에서 작동하도록 테스트되었으며 기존 레이아웃에 추가하기가 정말 쉽습니다.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>
#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

float:bottom@Rick Reilly의 답변에서 지적한 문제를 설명하기 위해 효과적으로 수행합니다 !

— 해시 브라운
소스
1
좋은! 참고로, IIRC <!DOCTYPE>는 이것이 IE에서 작동하기 위해서는 세트 가 필요합니다 (<= 8 이상); 이러한 이전 버전 display:table-XXX은 "표준"모드 에서만 지원 됩니다. 그러나 표준 모드는 IE6를 위해 설계된 많은 페이지를 손상시킵니다.
— David
3
- 당신은 또한 인 flexbox 사용할 수 있습니다 stackoverflow.com/questions/526035/...
— 조쉬 Crozier가
2
와 더 많은 행운을 찾았습니다 .foot{display: table-footer-group}. 내가 필요하지 않았다 vertical-align, height또는 border-collapse.
— Jacob Valenta
다른 콘텐츠가 #container포함되어 #foot있고 그렇지 않은 경우에도 작동 합니까?
— Solace
@Solace
— Hashbrown
20

오래된 질문이지만 여러 경우에 도움이 될 수있는 독특한 접근 방식입니다.

순수 CSS, 절대 위치 지정 없음, 높이 고정 없음, 크로스 브라우저 (IE9 +)

Working Fiddle을 확인하십시오

정상적인 흐름이 '위에서 아래로'있기 때문에 #copyright어떤 종류의 위치를 ​​절대적으로 지정하지 않고 div를 부모의 바닥에 달라고 요청할 수는 없지만 div를 부모 #copyright의 상단에 붙이려면 이것은 일반적인 흐름 방식이기 때문에 매우 간단합니다.

그래서 우리는 이것을 우리의 이점으로 사용할 것입니다. 우리는 divHTML 에서 s 의 순서를 바꿀 것입니다 . 이제 #copyrightdiv가 맨 위에 있으며 내용이 바로 따라옵니다. 우리는 또한 내용 div를 완전히 확장합니다 (의사 요소 및 지우기 기술 사용)

이제는 그 순서를 다시보기에서 뒤집는 것입니다. CSS 변환으로 쉽게 할 수 있습니다.

우리는 컨테이너를 180도 회전 시켰습니다. (그리고 다시 정상으로 보이도록 내용을 뒤집습니다)

컨텐츠 영역에 스쿠 롤 바를 원한다면 CSS 매직을 조금 더 적용해야합니다. 여기 에서 볼 수 있듯이 [이 예제에서 내용은 헤더 아래에 있지만 동일한 아이디어입니다.]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
스 니펫 확장

— 아브라함
소스
2
아니요, 렌더링이 얼마나 끔찍한 지보십시오. i.stack.imgur.com/ZP9Hw.png
— grg
7

div위의 요소에 대한 다른 컨테이너 를 만듭니다 #copyright. 다만 저작권 위의 새로운 추가 div: <div style="clear:both;"></div> 그것은 강제로 바닥 글을 상대 위치를 사용하는 경우처럼 다른 모든 아래로 ( bottom:0px;).

— 라플리 안드라
소스
7

이 시도;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— 게리 그린
소스
1
@Feelsbadman 그런 답변으로 다른 사람들의 코드를 변경하지 마십시오. CSS를 HTML에서 분리하려는 경우 실수로 코드를 다른 것으로 변경하여 응답을 무효화하고 포스터의 의도를 변경했을 수 있습니다.
— TylerH
6

여기에 제공된 답변 중 어느 것도 내 특별한 경우에 적용되거나 작동하지 않는 것처럼 보이지만 이 기사 를 발견 하여이 깔끔한 솔루션을 제공했습니다.

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

웹 사이트의 모든 HTML 코드를 다시 정렬하지 않고 모바일 디스플레이에 반응 형 디자인을 적용하는 데 매우 유용하다는 것을 알았 body습니다.

첫 번째 table-footer-group또는 다음 table-header-group과 같이 렌더링됩니다. 둘 이상이 있으면 다른 것으로 렌더링됩니다 table-row-group.

— 스키 피 르 그랜드 구루
소스
6

CSS 그리드

CSS Grid의 사용이 증가하고 있기 때문에 align-self그리드 컨테이너 안에있는 요소 를 제안 하고 싶습니다 .

align-self다음 예제의 end경우 self-end,, 값 중 하나를 포함 할 수 있습니다 flex-end.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>
스 니펫 확장

— 마노이 쿠마르
소스
5

당신은 참으로 수 align의 확인란 bottom사용하지 않고는 position:absolute당신이 알고있는 경우 height의 #container사용하여 텍스트 정렬 의 기능 inline-block요소를.

여기 에서 실제로 볼 수 있습니다.

이것은 코드입니다.

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}
— mk 크노
소스
5

translateY 및 top 속성 사용

자식 요소를 position : relative로 설정하고 위로 이동하는 것보다 100 % (부모의 100 % 높이) 다음과 같이 변환하여 부모의 맨 아래에 고정하십시오 : translateY (-100 %) (높이의 -100 %) 아이).

혜택

  • 당신이 하지 않는 페이지 플로우에서 요소를 가지고
  • 그것은 역동적이다

그러나 여전히 해결 방법 :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

이전 브라우저의 접두사를 잊지 마십시오.

— 사무엘
소스
4

CodePen 링크는 여기에 있습니다 .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>
스 니펫 확장

— 아지 잘란
소스
3

컨테이너의 높이에 관계없이 바닥에 "고착"시키려면 절대 위치 지정이 좋습니다. 물론 저작권 요소가 컨테이너의 마지막 요소 인 경우 항상 맨 아래에 있습니다.

질문을 확장 할 수 있습니까? 당신이하려는 일을 정확하게 설명하십시오 (왜 절대 위치를 사용하고 싶지 않은지)?

— 잭 슬리 트
소스
2

또한, 만약 거기에 사용하여 규정을의 position:absolute;또는 position:relative;당신은 항상 시도 할 수 있습니다, padding 부모 div 또는 퍼팅 margin-top:x;. 대부분의 경우 좋은 방법은 아니지만 경우에 따라 유용 할 수 있습니다.

— 고스트 에코
소스
1

어쩌면 이것은 누군가를 도울 수 있습니다 : 당신은 항상 다른 div 외부에 div를 놓고 음의 여백을 사용하여 위쪽으로 밀어 넣을 수 있습니다.

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>
— 디자인 상담
소스
1 

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
스 니펫 확장

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
스 니펫 확장

— 안몰 라탄 몰라
소스
1

하단에 끈적 거리는 바닥 글에 "position : absolute"를 사용하고 싶지 않습니다. 그런 다음 이렇게 할 수 있습니다 :

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>
스 니펫 확장

— 닐 레쉬 파와 르
소스
안녕 nilesh; 이 솔루션은 이미 여러 답변으로 제공됩니다. 내용이 중복되지 않도록 새 질문을 제공하기 전에 질문에 대한 기존 답변을 모두 읽으십시오 .
— TylerH
1

자식 블록의 높이를 모르는 경우 :

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
스 니펫 확장

http://jsbin.com/ULUXIFon/3/edit

자식 블록의 높이를 알고 있다면 자식 블록을 추가하고 padding-top / margin-top을 추가하십시오 :

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
스 니펫 확장

— zloctb
소스
0

이것이 전혀 언급되지 않았기 때문에 일반적으로 당신과 같은 상황에서 잘 작동합니다.

저작권 사업부 배치 후를container-div

다른 컨테이너와 비슷한 방식으로 (저작 한 전체 너비, 중심 설정 등) copyright-div 형식 만 지정하면됩니다.

CSS :

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML :

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

이것이 이상적이지 않은 유일한 시간은 container-div가로 선언되어 height:100%있고 사용자가 아래로 스크롤하여 저작권을 확인해야 할 때입니다. 그러나 여전히 문제를 해결할 수 있습니다 (예 : margin-top:-20px저작권 요소의 높이가 20px 인 경우).

  • 절대 포지셔닝 없음
  • 테이블 레이아웃 없음
  • 미친 CSS는 없습니다. 다른 브라우저마다 다르게 보입니다 (적어도 IE는 알 것입니다)
  • 간단하고 명확한 형식

옆으로 : OP가 '...'컨테이너 'div의 바닥에 붙어 ...' 라는 솔루션을 요구 했지만 그 아래에있는 것이 아니라 사람들이 좋은 솔루션을 찾고 있습니다. 하나입니다!

— 레위 사람
소스
#copyright 고정 높이 (다음 설정할 수 있습니다 경우 영업 이익의 경우,이 솔루션은 좋다 margin-top: -{element height}.
— Gajus
@Gajus : 절대 위치 나 고정 위치가 아닙니다. 이는 copyright-div가 첫 번째 컨테이너에 없다는 것을 제외하고 OP가 원하는 것을 정확하게 수행합니다 (저작권 높이에 관계없이). OP는 페이지가 아닌 컨테이너의 바닥에 저작권을 요구했습니다!
— 레위
죄송합니다. # 컨테이너의 컨테이너 높이가 고정 된 것은 아닙니다.
— Gajus
내가 실수하지 않는 한 OP가 해결하려고하는 실제 문제는 요소 높이가 다른 요소에 의해 지시 될 때 요소의 맨 아래입니다 (예 : 주석 jsbin.com/acoVevI/3) . 여기서는 컨테이너 외부에 버튼을 넣을 수 없습니다 . 문제를 자세히 설명하려면 jsbin.com/acoVevI/4를 참조하십시오 .
— Gajus
OP는 다음과 같이 말했습니다 : "저는 # 저작권을 # 컨테이너의 맨 아래에 붙이고 싶습니다." 또한 이것은 단순히 "#container의 맨 아래에 붙어 있어야하는"모든 경우에 유효한 예입니다. 이 솔루션은 도움이되어야하고 깔끔한 접근 방식을 가지고 있으며 많은 레이아웃에 적합합니다. 예 : stackoverflow.com ;-)와 같은 스크롤 내용이있는 모든 페이지
— Levite
0

다음은 알려진 높이와 너비 (적어도 대략)를 가진 요소를 오른쪽에 띄우고 맨 아래에 머물면서 다른 요소에 대한 인라인 요소로 동작하는 것을 목표로하는 접근 방식입니다. 다른 방법을 통해 다른 구석에 쉽게 배치 할 수 있기 때문에 오른쪽 하단에 집중되어 있습니다.

오른쪽 하단에 실제 링크와 임의의 형제 요소가있는 탐색 막대를 만들면서 레이아웃 자체를 방해하지 않고 막대 자체가 올바르게 확장되도록했습니다. "shadow"요소를 사용하여 탐색 모음의 링크 공간을 차지하고 컨테이너의 자식 노드 끝에 추가했습니다.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
— yo 스
소스
0

float:bottomCSS 에는 아무것도 호출되지 않습니다 . 가장 좋은 방법은 다음과 같은 경우 위치 지정을 사용하는 것입니다.

position:absolute;
bottom:0;
— 투 히트 라만
소스
답을 설명하십시오.
— Mohit Raj Purohit
0

컨테이너에 자식이 하나 뿐인 경우 부모의 맨 아래에 단일 div를 배치하는 데 안정적으로 작동 하는 table-cell및 vertical-align접근 방식을 사용할 수 있습니다 .

table-footer-group언급 된 다른 답변으로 사용 하면 parent의 높이 계산이 중단됩니다 table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>
스 니펫 확장

— 하이 장
소스
0

에 따르면 : w3schools.com

위치를 가진 요소 : absolute; (고정 된 것처럼 뷰포트를 기준으로 배치하는 대신) 가장 가까운 배치 된 조상을 기준으로 배치됩니다.

따라서 부모 요소를 상대 또는 절대 등으로 배치하고 원하는 요소를 절대로 배치하고 하위를 0으로 설정해야합니다.

— 조나스 프레 이레
소스
이것은 이미 받아 들여진 대답에 언급되어 있습니다.
— TylerH
-1

스타일의 div position:absolute;bottom:5px;width:100%;가 작동하지만 더 많은 스크롤 업 상황이 필요했습니다.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
— 나이스 제이
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.