div의 내용을 아래쪽에 맞추는 방법 <h1>Header title</h1> Header content (one

다음 CSS 및 HTML 코드가 있다고 가정 해보십시오.

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>
스 니펫 확장

헤더 섹션의 높이는 고정되어 있지만 헤더 내용은 변경 될 수 있습니다.

헤더의 내용이 헤더 섹션의 하단에 수직으로 정렬되도록 텍스트의 마지막 줄이 헤더 섹션의 하단에 “고정”됩니다.

따라서 한 줄의 텍스트 만 있으면 다음과 같습니다.

-----------------------------
| 헤더 제목
|
|
|
| 헤더 내용 (한 줄로 결과)
-----------------------------

그리고 세 줄이 있다면 :

-----------------------------
| 헤더 제목
|
| 헤더 내용 (그렇습니다
| 완벽하게 많은 것들
| 세 줄에 걸쳐 있음)
-----------------------------

CSS에서 어떻게 할 수 있습니까?

답변

상대 + 절대 위치는 가장 좋은 방법입니다.

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>
스 니펫 확장

그러나 그 문제가 발생할 수 있습니다. 그것을 시도했을 때 내용 아래에 드롭 다운 메뉴가 표시되는 데 문제가있었습니다. 예쁘지 않아요.

솔직히 수직 중심 문제와 항목의 수직 정렬 문제가 고정 높이가 아니기 때문에 테이블을 사용하는 것이 더 쉽습니다.

예 : 테이블을 사용하지 않고이 HTML 레이아웃을 수행 할 수 있습니까?

답변

CSS 위치 지정을 사용하십시오.

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

으로 김근삼 언급 , 당신은이 일을 할 수있는 헤더 내용을 확인할 필요가있다.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

답변

레거시 브라우저가 걱정되지 않으면 flexbox를 사용하십시오.

부모 요소의 표시 유형이 flex로 설정되어 있어야합니다.

div.parent {
  display: flex;
  height: 100%;
}

그런 다음 자식 요소의 align-self를 flex-end로 설정합니다.

span.child {
  display: inline-block;
  align-self: flex-end;
}

다음은 내가 배우는 데 사용한 리소스입니다.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

답변

나는이 속성을 사용하고 작동합니다!

#header {
  display: table-cell;
  vertical-align: bottom;
}

답변

한동안 같은 문제로 어려움을 겪은 후 마침내 모든 요구 사항을 충족시키는 솔루션을 찾았습니다.

  • 컨테이너의 높이를 알 필요가 없습니다.
  • 상대 + 절대 솔루션과 달리 내용은 자체 레이어에 떠 다니지 않습니다 (즉, 컨테이너 div에 정상적으로 포함됩니다).
  • 여러 브라우저에서 작동합니다 (IE8 +).
  • 구현이 간단합니다.

해결책은 하나를 취하는데 <div>, 이것을 “aligner”라고 부릅니다.

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

이 트릭은 키가 크고 스키니 div를 만들어 텍스트 기준선을 컨테이너의 맨 아래로 밀어 넣습니다.

다음은 OP가 요구 한 것을 달성하는 완전한 예입니다. 데모 목적으로 만 “bottom_aligner”를 두껍고 빨간색으로 만들었습니다.

CSS :

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML :

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

답변

현대적인 방법은 flexbox를 사용하는 것 입니다. 아래 예를 참조하십시오. Some text...Flex 컨테이너에 직접 포함 된 텍스트는 익명의 Flex 항목으로 래핑되므로 HTML 태그 로 래핑 할 필요가 없습니다 .

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>
스 니펫 확장

일부 텍스트 만 있고 컨테이너의 바닥에 수직으로 정렬하려는 경우.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>
스 니펫 확장

답변

부모 / 블록 요소의 행 높이가 인라인 요소의 행 높이보다 큰 경우 인라인 또는 인라인 블록 요소를 블록 레벨 요소의 맨 아래에 정렬 할 수 있습니다. *

마크 업 :

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS :

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* 표준 모드인지 확인하십시오