programing

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

javamemo 2023. 4. 20. 19:40

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

다음 HTML 지정:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

#copyright에 #container절대 포지셔닝 없이 이 작업을 수행할 수 있습니까?

아닐 거예요.

「」의 할당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('S')

★★★★
이것은 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 。

절대적인 포지셔닝 없이 크로스 브라우저(IE9+)를 통한 순수 CSS

현업 바이올린을 체크하다

은 '에서 아래로 '위로'라고 할 수 .#copyright가 div를 div를 원했을 때, 밑에 것이다.#copyright방식이기 입니다.div는 보통 흐름 방식이기 때문입니다. 왜냐하면 이것이 정상적인 흐름이기 때문이다.

순서를 .div의 s, 는 HTML의 s, " " 입니다.#copyright가 맨, 그 , 는 (나 클리어하여) div를 .또한 콘텐츠 div는 (의사 요소와 클리어 기술을 사용하여) 쭉 확장됩니다.

이제 시야에서 순서를 뒤집는 문제일 뿐입니다.CSS 트랜스폼으로 간단하게 실행할 수 있습니다.

용기를 180도 회전시키고, 이제 Up-is-down. (그리고 다시 정상적으로 보이도록 내용을 되돌립니다.)

콘텐츠 영역에 스크루바를 도입하려면 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>

CSS 그리드

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

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>

컨테이너를 만듭니다.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;
}

를 모두 을 적용할 때 합니다.body테이블로 사용할 수 있습니다.

번째 " " "만"에해 주세요.table-footer-group ★★★★★★★★★★★★★★★★★」table-header-group 개 일 경우 는 1로 됩니다.table-row-group.

할 수 align로 the로 bottom하지 않고position:absolute the the the the 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% 키)로 설정하고 변환: 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>

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

질문 좀 더 자세히 말씀해 주시겠어요?무엇을 하려고 하는지 정확하게 설명하십시오(그리고 절대 포지셔닝 기능을 사용하지 않으려는 이유).

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

#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

하위 블록의 높이를 알고 있는 경우 하위 블록을 추가한 다음 패딩 탑/마진 탑을 추가합니다.

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

맨 위의 컨텐츠에 사용 가능한 공간을 할당하여 그리드를 사용할 수 있습니다.

 #container {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 10rem; /* or 100% or anything */
}

<div id="container">
  This is random content.
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

만약에 ㅇㅇㅇㅇ를 사용할 때 , ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ.position:absolute; ★★★★★★★★★★★★★★★★★」position:relative; , , , , , , , , , 을 할 수 .padding (부모의 보호 div '아예'를 붙입니다.margin-top:x;대부분의 경우 그다지 좋은 방법은 아니지만 경우에 따라서는 도움이 될 수 있습니다.

이 특정 시나리오의 솔루션:

부모 아래쪽에 inner를 배치합니다.부모의 키는 "가장 큰" 형제자매의 키에 따라 설정됩니다.

셋업:

는 여러 사람과 을 하고 있다.<div class="container">
것것 。<div class="container"> 이웃하고 있다<div class="supercontainer">
★★<div class="container"> 있습니다. 즉, 3개의 내수가 겹쳐져 있습니다.<div class="title">,<div class="content">,<div class="footer">

원하는 결과:

★★★★★<div class="container"> 그 중에서 가장큰.높이는 px로 정의되지 않고 그 중에서 가장 높은 높이가 됩니다.
<div class="title"> <div class="container">
<div class="content">아래에 배치해야 합니다.<div class="title">
<div class="footer">에 <div class="container"> 되지 않음

이것이 현재 상태입니다.https://codepen.io/xavier-atero/pen/ExvWQww

.supercontainer {
  border: solid 1px black;
  display: flex;
}

.container, .other-container {
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;
}

.title {
  margin: 10px;
  border: solid 1px blue;
}

.content {
  margin: 10px;  
  border: solid 1px cyan;
}

.footer {
  margin: 10px;
  background: lime;
}

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

________FLEXBOX를 사용한 솔루션_____________________

결과는 다음과 같습니다.https://codepen.io/xavier-atero/pen/MWvpBMz

.supercontainer {
  border: solid 1px black;
  display: flex;
}

.container, .other-container {
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.title {
  margin: 10px;
  border: solid 1px blue;
}

.content {
  margin: 10px;  
  border: solid 1px cyan;
}

.footer {
  margin: 10px;
  background: lime;
  margin-top: auto;
  border: solid 1px fuchsia;
}

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

_______________________________________

결과는 다음과 같습니다.https://codepen.io/xavier-atero/pen/rNzyKJm

.supercontainer {
  border: solid 1px black;
  display: flex;
}

.container, .other-container {
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;
  border-collapse:collapse;
  display : table;
}

.title {
  margin: 10px;
  border: solid 1px blue;
}

.content {
  margin: 10px;  
  border: solid 1px cyan;
}

.footer {
  margin: 10px;
  background: lime;
  border: solid 1px fuchsia;
  display: table-row;
  vertical-align: bottom;
  height: 1px;
}

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

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

맨 아래에 있는 스틱 바닥글에 "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>

여기에서는 높이와 폭(적어도 약)이 알려진 요소를 오른쪽으로 띄워 맨 아래에 두고 다른 요소에 대한 인라인 요소로 동작시키는 것을 목표로 하는 접근방식을 보여 줍니다.다른 방법으로 쉽게 다른 구석에 배치할 수 있기 때문에 오른쪽 하단에 포커스가 맞춰져 있습니다.

오른쪽 하단에 실제 링크가 있는 네비게이션 바를 만들 필요가 있었습니다.또한 레이아웃을 방해하지 않고 바 자체가 적절히 늘어나도록 해야 했습니다.네비게이션 바의 링크 공간을 차지하기 위해 "섀도" 요소를 사용하여 컨테이너의 하위 노드 끝에 추가했습니다.

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

이게 도움이 될 수도 있어요항상 다른 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 배치

CSS:

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

HTML:

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

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

절대 포지셔닝 없음
테이블 레이아웃 없음
다른 브라우저에서는 모두 다르게 보이는 css는 없습니다(적어도 IE는 알고 있습니다).
심플하고 알기 쉬운 포맷

OP가 '컨테이너' div의 밑바닥에 붙는 솔루션을 요구했다는 것은 알지만, 그 아래에 있는 것은 아니지만, 사람들은 여기서 좋은 솔루션을 찾고 있습니다.이것이 바로 그것입니다!

게 요.float:bottomCSS c c c c c c c c가장 좋은 방법은 다음과 같은 경우 포지셔닝을 사용하는 것입니다.

position:absolute;
bottom:0;

「아이를 할 수 .table-cell ★★★★★★★★★★★★★★★★★」vertical-align하나의 div를 모체의 하단에 안정적으로 배치하는 데 효과가 있는 접근법.

「」를 사용하고 있는 에 주의해 .table-footer-group 의 키 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>

설명: w3schools.com

위치: absolute;가 있는 요소는 뷰포트에 대해 고정된 위치가 아닌 가장 가까운 상위 위치에 상대적으로 배치됩니다.

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

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

'programing' 카테고리의 다른 글

열이 수정된 경우에만 SQL 업데이트 트리거 (0)	2023.04.20
모든 WPF 파일의 xmlns란 무엇입니까? (0)	2023.04.20
Swift 기반 애플리케이션은 OS X 10.9/iOS 7 이하에서 작동합니까? (0)	2023.04.20
bash를 사용하여 파일(인수)을 "in place"로 편집하는 명령을 실행하려면 어떻게 해야 합니까? (0)	2023.04.20
Qt 5.1.1: 플랫폼 플러그인 "windows"가 없어 응용 프로그램을 시작하지 못했습니다. (0)	2023.04.20

현재글용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

asp.net, python, Oracle, Git, Excel, CSS, json, reactjs, PowerShell, Ajax, sql-server, typescript, MariaDB, jQuery, angularJS, C, Spring-boot, wordpress, mysql, MongoDB,

Today :
Yesterday :

javamemo

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

Flexbox 접근법!

절대적인 포지셔닝 없이 크로스 브라우저(IE9+)를 통한 순수 CSS

CSS 그리드

translateY 및 top 속성 사용

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

용기 바닥에 div를 배치하려면 어떻게 해야 합니까?

Flexbox 접근법!

절대적인 포지셔닝 없이 크로스 브라우저(IE9+)를 통한 순수 CSS

CSS 그리드

translateY 및 top 속성 사용

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바