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

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

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

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

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

답변

아마 아닐 것입니다.

할당 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>
스 니펫 확장

답변

실제로 @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는 우리의 삶을 더 편하게 만들어 주어야했고 전반적으로 그랬습니다. 그러나 사실이 세월이 지난 후에도 여전히 깨지고 반 직관적 인 혼란에 빠졌습니다. 모든 문제를 해결할 수는 없습니다. 불완전합니다.

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

답변

flexbox 접근 방식!

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

여기 예

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

코드 스 니펫 표시

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>
스 니펫 확장

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

여기 예

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

코드 스 니펫 표시

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>
스 니펫 확장

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

답변

예.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의 답변에서 지적한 문제를 설명하기 위해 효과적으로 수행합니다 !

답변

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

순수 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>
스 니펫 확장

답변

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

답변

이 시도;

<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>