아래에서 위로 스태킹 다이브

고정 높이로 divs를 추가 div하면 자식 div가 위쪽에서 아래쪽으로 나타나고 위쪽 테두리에 붙어 있습니다.

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

이제 다음과 같이 아래쪽에서 위쪽으로 표시하려고합니다 (아래쪽 테두리에 고정).

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

그리고 ... 나는 당신이 무슨 뜻인지 알기를 바랍니다.

CSS로 간단하게 할 수 vertical-align: bottom있습니까? 아니면 JavaScript와 함께 무언가를 해킹해야합니까?

모든 답변에 질문의 스크롤 막대 포인트가 누락되었습니다 . 그리고 힘든 일입니다. 최신 브라우저 및 IE 8 이상에서만 작동 해야하는 경우 테이블 위치 지정 vertical-align:bottom및을 사용할 수 있습니다 max-height. 특정 브라우저 호환성에 대해서는 MDN 을 참조하십시오 .

데모 (수직 정렬)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

그 외에는 CSS로는 불가능하다고 생각합니다. 을 사용하여 요소를 컨테이너 하단에 붙일 수 position:absolute있지만 흐름에서 벗어날 수 있습니다. 결과적으로 컨테이너는 늘어나지 않고 컨테이너를 스크롤 가능하게 만듭니다.

데모 (위치 절대)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

이것에 대한 더 현대적인 대답은 사용하는 것 flexbox입니다.

다른 많은 최신 기능과 마찬가지로 레거시 브라우저 에서는 작동하지 않으므로 IE8-9 시대의 브라우저를 지원할 준비가되지 않은 경우 다른 방법을 찾아야합니다.

방법은 다음과 같습니다.

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

그리고 그게 당신이 필요한 전부입니다. 자세한 flexbox내용은 MDN을 참조하십시오 .

다음은 기본적인 스타일링이 포함 된 예입니다. http://codepen.io/Mest/pen/Gnbfk

CSS 변환을 사용하여이를 보관할 수 있습니다.

코드 펜을 만들었습니다. https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

아이디어는 루트를 먼저 수평으로 뒤집은 다음 직접 하위 div를 뒤집는 것입니다.

참고 : 위의 방법은 div의 순서를 반대로 바꿉니다. 바닥에서 시작하도록 단순히 배치하려면 다음을 수행하십시오.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

구식으로 유지 ...

나는에서 같은 일을하고 싶어 #header 사업부 나는 빈 만들 수 있도록 DIV 전화를 #headspace하고 (내부 상단에 스택을 배치 #header) :

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

그런 다음 보이지 않는 div 의 높이에 백분율을 사용 하여 다른 것을 아래로 밀었습니다. 브라우저의 개발자 / 검사자 도구를 사용하면 쉽게 얻을 수 있습니다.#headspace

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}

메시지 흐름이 아래에서 위로 움직이는 채팅 앱과 같은 bootstarp 로이 작업을 원합니다.

물건을 읽은 후, 나는 이것을 발견했다.

외부 div가 클래스 .outerDiv라고 가정 한 다음 UI, list

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

사용하면 간단합니다 position: absolute.

http://jsfiddle.net/XHeZj/

<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>