다음과 같은 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>
하지만 문제가 발생할 수 있습니다. 제가 시도했을 때 콘텐츠 아래에 드롭다운 메뉴가 표시되는 문제가 있었습니다. 보기 좋지 않습니다.
솔직히 세로 중앙 배치 문제나 항목의 높이가 고정되어 있지 않은 수직 정렬 문제는 표를 사용하는 것이 더 쉽습니다.
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;
}
cletus가 언급했듯이]1, 이 작업을 수행하려면 헤더 콘텐츠를 식별해야 합니다.
<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>
Flex 로 상위입니다 요소점 요구사항뿐 표시 유형이 있다.
div.parent {
display: flex;
height: 100%;
}
span.child {
display: inline-block;
align-self: flex-end;
}
이와 같은 문제로 골치를 앓고 난 후 일정 기간 동안, 마침내 찾아낸 아웃하려면 솔루션으로 만족시킵니다 내 요구 사항:
그냥 ',' 는 하나의 솔루션, 어떤 난 security. " aligner" div> <;;:
< b> CSS< /b>;;;
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
< b> html< /b>;;;
<div class="bottom_aligner"></div>
... Your content here ...
이 전략은 키가 크고 마른 만들어 작동됨 div, 아래쪽에 있는 텍스트 기준선부터 푸시합니다 컨테이너입니다.
이것은 예를 갖춘 완료하십시오 묻는 것은 어떤 OP. # 39, ve, bottom_aligner" " i& 만들었다. 굵은선, 레드 데모 용도로만.
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>
현대 길일 약간만이라도 사용하여 [ 플렉상자 ] [1]. 아래 예를 참조하십시오. # 39 랩 (wrap) ', 심지어 일부 텍스트를 너회가 don& 필요가 없다.' 에 포함된 모든 html 태그를 직접 텍스트를 이후 flex 컨테이너입니다 래핑됩니다 익명 flex 항목설명프로세서.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
일부 대뿐이라면 텍스트 및 정렬하려면 세로일 하단으로 컨테이너입니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
[1]: http://caniuse.com/ # 성과 = 플렉상자
display: flex;
align-items: flex-end;
인라인 방정식인지 인라인 블록 요소가 될 수 있는 경우 상위 / 차단 라인 높이 맞춰 블록 단위 요소 요소에 인라인 element.* 보다 큽니다.
수정표시:
<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;
}
Flex 달성됩니다 됩니다
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
<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>
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;
}
예를 들어 같은 방법을 사용하여 데모를 역시 세로일 센터급 맞추십시오 기술이다.
여기 다른 이용하여 솔루션을 플렉상자 사용하지 않고 있지만 아래쪽 대해 flex 끝 맞춤에는. 로 자동 설정 '에서' 이 의견은 아래쪽 여백에 h1 푸시할 나머지 내용이 to the bottom):
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
또한 '텍스트' 를 통해 여백 상단형 자동 똑같이 해야 하지만 이 경우 랩 (wrap) '또는' 스팬합니다 div 안에 '이':
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
div 에 추가할 수 있다는 것은 매우 간단한,) 는 한 줄짜리 솔루션이므로 헤이스 선 염두에 두고 있는 이 모든 div& # 39 의 텍스트 들어갈 예정이다.
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 합니다
그래도 이렇게 좋은 방법이 될 수 있는 외부 컨테이너인 if there was 없이 그냥 # 39 의 텍스트 내에 자동으로 맞추십시오 it& İç 자체.
#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;
}
'X' 데이터의 solaris. 세로폭 될 것입니다. 상대 및 바닥글에 것도 상대적인 너회의 제기되고 있다. 할 일은 모든 데이터를 추가할 수 있습니다
bottom: -webkit-calc(-100% + x);
데이터의 항상 dell. 둔부의 컨테이너입니다. 함께 있는 경우에도 컨테이너입니다 작동됨 동적임 높이.
<div class="container">
<div class="data"></div>
</div>
.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);
}
ᄋ "이번 도움이 됩니다.
내가 찾은 이 솔루션은 대한 기본 부트스트랩에 템플리트를 베이시드 시작
/* 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;
}
div) 의 경우 랩할 설정할 수 있습니다 컨텐츠의 (# 헤더입니다 컨텐트입니다 other& # 39 과 같이, s 회신과) 대신 전체 # 헤더입니다 아마 이 외곽진입 시도하시겠습니까 수도 있습니다.
<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>
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
(http://codepen.io/codeboyim/pen/pGxcs") 의 쇼,,, a href = " < > codepen< /a>.
#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>
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
이 모든 질문에 대한 대답, 되니그들 협력했습니다 for me. # 39 m no, i& 플렉상자 숙련가 좋았지만, 그림, 이는 쉽게 이해하기 쉽고 간단하고 합리적으로 아웃해야 사용합니다. 뭔가 별도의 div 와 삽입하십시오 &solarisdvd 미삭 그 내용, 빈 공간을 채우기 위해 머리가 자란다.
"'css 드미콘타이너 { 디스플레이: flex. 높이: 250px. flex 흐름: 열. }
윈필러 { flex: 1 1. }
"'
"'html div class = " myContainer" > <;;; < div> Top< /div>;;; ,, div class = " < filler" > < /div>. < div> Bottom< /div>;;; < /div>; "'
이 때 크기가 고정되어 있지 않은 경우 아래 내용을 예상대로 중에서도 컨테이너입니다 고정되어 있지 않은 경우도 있다.
나는 그 방법을 고안하기도 원하는거요 많이유 간단해진다는 what& # 39 에 비해 언급되지 않았다.
H1, div 안에 있는 머리글로 높이를 설정되었습니다 하였으매 너회의 '스타일' 태그번호 다음과 같습니다.
float: left;
padding: 90px 10px 11px