div의 콘텐츠를 하단에 정렬하는 방법
다음 CSS 및 HTML 코드가 있다고 가정합니다.
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>헤더 섹션은 높이가 고정되어 있지만 헤더 내용이 변경 될 수 있습니다.
헤더의 내용을 헤더 섹션의 하단에 수직으로 정렬하여 마지막 텍스트 줄이 헤더 섹션의 하단에 "고정"되도록하고 싶습니다.
따라서 텍스트가 한 줄만있는 경우 다음과 같습니다.
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
그리고 세 줄이 있다면 :
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
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>
나는 이러한 속성을 사용하고 작동합니다!
#header {
display: table-cell;
vertical-align: bottom;
}
레거시 브라우저에 대해 걱정하지 않는다면 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/
이 같은 문제로 얼마 동안 고생 한 끝에 마침내 모든 요구 사항을 충족하는 솔루션을 찾았습니다.
- 컨테이너의 높이를 알 필요가 없습니다.
- 상대 + 절대 솔루션과 달리 콘텐츠는 자체 레이어에서 부동하지 않습니다 (즉, 일반적으로 컨테이너 div에 포함됨).
- 모든 브라우저 (IE8 +)에서 작동합니다.
- 구현이 간단합니다.
솔루션 <div>은 "정렬 기"라고 부르는 하나만 사용합니다 .
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...플렉스 컨테이너에 직접 포함 된 텍스트는 익명 플렉스 항목으로 래핑되기 때문에 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>display: flex;
align-items: flex-end;
부모 / 블록 요소의 줄 높이가 인라인 요소의 줄 높이보다 크면 인라인 또는 인라인 블록 요소를 블록 수준 요소의 맨 아래에 정렬 할 수 있습니다. *
마크 업 :
<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;
}
* 표준 모드인지 확인
당신은 단순히 플렉스를 얻을 수 있습니다
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>동적 높이 항목이 여러 개있는 경우 테이블 및 테이블 셀의 CSS 표시 값을 사용합니다.
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
여기에 JSBin 데모를 만들었습니다 : http://jsbin.com/INOnAkuF/2/edit
데모에는 동일한 기술을 사용하여 수직으로 중앙 정렬하는 방법의 예도 있습니다.
이를위한 유연한 방법이 있습니다. 물론 사용자가 7 년 전에 필요했기 때문에 IE8에서는 지원되지 않습니다. 무엇을 지원해야하는지에 따라이 중 일부를 제거 할 수 있습니다.
그래도 외부 컨테이너없이이 작업을 수행 할 수있는 방법이 있다면 좋을 것입니다. 텍스트를 자체적으로 정렬하면됩니다.
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
매우 간단한 단선 솔루션은 모든 div의 텍스트가 아래로 이동한다는 점을 염두에두고 div에 line-heigth를 추가하는 것입니다.
CSS :
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML :
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
이것은 div 내부의 텍스트가 내려 가기를 원할 때 실용적이고 빠른 솔루션이라는 것을 명심하십시오. 이미지와 물건을 결합해야하는 경우 좀 더 복잡하고 반응이 빠른 CSS를 코딩해야합니다.
이를 위해 절대 + 상대가 필요하지 않습니다. 컨테이너와 데이터 모두에 대해 상대 위치를 사용하는 것이 매우 가능합니다. 이것이 당신이하는 방법입니다.
데이터의 높이가 x. 컨테이너는 상대적이고 바닥 글도 상대적입니다. 데이터에 추가하기 만하면됩니다.
bottom: -webkit-calc(-100% + x);
데이터는 항상 컨테이너의 맨 아래에 있습니다. 동적 높이의 컨테이너가 있어도 작동합니다.
HTML은 다음과 같습니다.
<div class="container">
<div class="data"></div>
</div>
CSS는 다음과 같습니다.
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
도움이 되었기를 바랍니다.
다음은 flexbox를 사용하지만 하단 정렬을 위해 flex-end 를 사용하지 않는 또 다른 솔루션 입니다. 아이디어는 설정하는 것입니다 margin-bottom에 H1 에 자동으로 바닥에 남아있는 내용을 밀어 :
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>margin-top:auto텍스트 에서도 똑같이 할 수 있지만이 경우에는 div또는 안에 감싸 야합니다 span.
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>전체 #header 대신 콘텐츠의 래핑 div 높이 (다른 사람의 응답에 표시된 # header-content)를 설정할 수 있다면 다음 방법을 시도해 볼 수도 있습니다.
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
작동하는 것 같습니다.
HTML : 나는 맨 아래에있다
css :
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
이 솔루션은 기본 부트 스트랩 시작 템플릿을 기반으로합니다.
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>이 모든 답변이 저에게 효과가 없었습니다 ... 저는 flexbox 전문가는 아니지만 이해하기 쉽고 이해하기 쉽고 사용하기 쉽습니다. 나머지 콘텐츠에서 무언가를 분리하려면 빈 div를 삽입하고 공간을 채우도록 확장합니다.
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
컨테이너의 크기가 고정되지 않은 경우에도 하단 콘텐츠의 크기가 고정되지 않은 경우 예상대로 반응합니다.
나는 언급 된 것보다 훨씬 더 간단한 방법을 고안했습니다.
헤더 div의 높이를 설정합니다. 그런 다음 그 안에 H1다음과 같이 태그 스타일을 지정하십시오 .
float: left;
padding: 90px 10px 11px
저는 클라이언트 사이트에서 작업 중이며 디자인은 특정 div의 맨 아래에 텍스트가 있어야합니다. 이 두 줄을 사용하여 결과를 얻었으며 제대로 작동합니다. 또한 텍스트가 확장되면 패딩은 그대로 유지됩니다.
시도 :
div.myclass { margin-top: 100%; }
%를 변경하여 수정하십시오. 예 : 120 % 또는 90 % ... 등.
내가 클라이언트를 위해 방금 한 사이트는 바닥 글 텍스트가 높은 상자였으며 하단의 텍스트는 간단한 패딩으로 달성했으며 모든 브라우저에서 작동해야한다고 요청했습니다.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
브라우저 간 완벽한 예는 여기에 있습니다.
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
아이디어는 하단에 div를 표시하고 거기에 고정시키는 것입니다. 종종 간단한 접근 방식으로 고정 div가 주요 콘텐츠와 함께 위로 스크롤됩니다.
다음은 완전히 작동하는 최소한의 예입니다. div 임베딩 트릭이 필요하지 않습니다. 많은 BR은 스크롤바를 강제로 표시하기위한 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
코드가 IE에서 작동하지 않을 수 있는지 궁금하다면 맨 위에 DOCTYPE 태그를 추가하는 것을 잊지 마십시오. 이것이 IE에서 작동하는 것이 중요합니다. 또한 이것은 첫 번째 태그 여야하며 그 위에 아무 것도 표시되지 않아야합니다.
작동하는 것 같습니다.
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
적은 것을 사용 하면 CSS 퍼즐을 코딩하는 것보다 훨씬 더 풀 수 있습니다. 저는 CSS를 좋아합니다. 하나의 매개 변수 만 변경하여 전체 레이아웃을 변경할 수 있다는 것은 정말 기쁜 일입니다.
2015 년 솔루션
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
천만에요
참고 URL : https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom
'development' 카테고리의 다른 글
| 속성별로 사용자 지정 개체의 ArrayList 정렬 (0) | 2020.09.27 |
|---|---|
| 이전 커밋을 여러 커밋으로 나누기 (0) | 2020.09.27 |
| Ruby on Rails의 nil v. empty v. blank에 대한 간결한 설명 (0) | 2020.09.27 |
| React JSX 내부 루프 (0) | 2020.09.27 |
| Django는 확장됩니까? (0) | 2020.09.27 |