program story

컨테이너 하단에 div를 배치하려면 어떻게해야합니까?

inputbox 2020. 9. 30. 10:38
반응형

컨테이너 하단에 div를 배치하려면 어떻게해야합니까?

다음 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 고정 바닥 글"접근 방식 또는 약간 더 얇은 변형입니다. 이 접근 방식은 고정 높이 바닥 글이있는 경우 유용합니다.

콘텐츠가 너무 짧으면 창 하단에 표시되고 창이 너무 짧으면 콘텐츠 하단에 표시되는 가변 높이 바닥 글이 필요한 경우 어떻게해야합니까?

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

예를 들면 :

* {
    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 (마크 업이있는 나사)를 사용 하지 않고도이 작업을 수행 할 수 있습니다 .

DEMO
IE> 7, chrome, 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을 확인하십시오.

정상적인 흐름은 '위에서 아래로'이기 때문에 #copyrightdiv가 어떤 종류의 절대 위치없이 부모의 맨 아래에 고정 하도록 요청할 수는 없지만 div가 부모 #copyright의 맨 위에 고정되도록하려면 이것은 일반적인 흐름 방식이기 때문에 매우 간단합니다.

그래서 우리는 이것을 우리의 이점으로 사용할 것입니다. divHTML 에서 s 의 순서를 변경합니다 . 이제 #copyrightdiv가 맨 위에 있고 내용이 바로 그 뒤에 있습니다. 우리는 또한 콘텐츠 div를 완전히 늘립니다 (의사 요소 및 지우기 기술 사용).

이제 뷰에서 순서를 뒤집는 문제입니다. CSS 변환으로 쉽게 할 수 있습니다.

컨테이너를 180도 회전하고 이제는 위아래로 회전합니다. (그리고 우리는 다시 정상적으로 보이도록 내용을 역으로 되돌립니다)

콘텐츠 영역 내에 scroolbar를 사용하려면 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>

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

#container {
  display: table;
}

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

웹 사이트의 모든 html 코드를 다시 정렬하지 않고도 모바일 디스플레이에 반응 형 디자인을 적용 body하여 테이블로 설정하는 데 매우 유용 합니다.

첫 번째 table-footer-group또는 만 table-header-group이와 같이 렌더링 된다는 점에 유의하십시오. 둘 이상이있는 경우 나머지는로 렌더링됩니다 table-row-group.

당신은 참으로 수 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;
}

translateY 및 top 속성 사용

요소 자식을 위치 : 상대로 설정하고 위쪽으로 이동하는 것보다 : 100 % (부모의 100 % 높이) 및 transform : translateY (-100 %) (즉, 높이의 -100 %)를 통해 부모의 아래쪽에 고정합니다. 아이).

혜택

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

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

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

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

여기에 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>

컨테이너의 높이에 관계없이 바닥에 "고정"되도록하려면 절대 위치를 지정하는 것이 좋습니다. 물론, 저작권 요소가 컨테이너의 마지막 요소라면 어쨌든 항상 맨 아래에있을 것입니다.

질문을 확장 할 수 있습니까? 수행하려는 작업을 정확히 설명하고 절대 위치 지정을 사용하지 않는 이유를 설명 하시겠습니까?

또한 position:absolute;또는 사용에 대한 규정이있는 경우 position:relative;언제든지 padding parent div 또는 margin-top:x;. 대부분의 경우 좋은 방법은 아니지만 경우에 따라 유용 할 수 있습니다.

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

position:absolute;
bottom:0;

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

    #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>

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

아마도 이것은 누군가를 도울 수 있습니다 : 항상 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>

이것이 전혀 언급되지 않았기 때문에 일반적으로 귀하와 같은 상황에서 잘 작동하는 것은 다음과 같습니다.

container-div 뒤에 copyright-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의 맨 아래에 달라 붙는 ..." 해결책을 요구했다는 것을 안다. 그러나 그 아래에있는 것은 아니지만, 사람들은 여기서 좋은 해결책을 찾고있다. 하나입니다!

컨테이너에 자식이 하나만있는 경우 부모 맨 아래에 단일 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>

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>

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

오른쪽 하단에 실제 링크가있는 내비게이션 막대와 임의의 형제 요소를 만들면서 막대 자체가 레이아웃을 방해하지 않고 적절하게 늘어나도록해야했습니다. "그림자"요소를 사용하여 탐색 모음의 링크 공간을 차지하고 컨테이너의 자식 노드 끝에 추가했습니다.

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


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

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

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

참고 URL : https://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container

반응형

'program story' 카테고리의 다른 글

"캐시 친화적"코드 란 무엇입니까?  (0) 2020.09.30
항상 소수점 이하 2 자리를 표시하도록 숫자 형식 지정  (0) 2020.09.30
목록을 문자열로 변환하는 방법  (0) 2020.09.30
CSS를 사용하여 체크 박스 스타일을 지정하는 방법  (0) 2020.09.29
Google API의 "최신"jQuery 라이브러리에 대한 링크가 있습니까?  (0) 2020.09.29

'program story'의 다른글

  • 현재글컨테이너 하단에 div를 배치하려면 어떻게해야합니까?

관련글

댓글

티스토리툴바