질문자 :kristof
다음 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">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</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; }
cletus가 언급했듯이 이 작업을 수행하려면 헤더 콘텐츠를 식별해야 합니다.
<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> 만 사용합니다.
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>
다음은 flexbox를 사용하지만 하단 정렬을 위해 flex-end를 사용하지 않는 또 다른 솔루션입니다. 아이디어는 h1의 margin-bottom 을 auto 로 설정하여 나머지 내용을 맨 아래로 밀어내는 것입니다.
#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-parent { height: 150px; display: grid; } .header-content { align-self: end; }
<div class="header-parent"> <h1>Header title</h1> <div class="header-content"> Header content </div> </div>
동적 높이 항목이 여러 개 있는 경우 table 및 table-cell의 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
데모에는 동일한 기술을 사용하여 수직으로 가운데 정렬하는 방법의 예도 있습니다.
이를 위해 절대 + 상대가 필요하지 않습니다. 컨테이너와 데이터 모두에 대해 상대 위치를 사용하는 것은 매우 가능합니다. 이것이 당신이 그것을 하는 방법입니다.
데이터의 높이가 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); }
여기에서 라이브 예제
도움이 되었기를 바랍니다.
유연한 방법은 다음과 같습니다. 물론 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에 줄 높이를 추가하는 것입니다.
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를 코딩해야 합니다.
이 모든 답변과 아무 것도 저에게 효과가 없었습니다... 저는 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를 맨 아래로 이동하는 가장 좋은 방법은 다음과 같습니다. 기본적으로 해야 할 일은 display flex와 flex-direction을 부모에 대한 열로 설정하고 'margin-top: auto'를 자식에 추가하는 것입니다. 부트스트랩과 그 클래스.
.box-wrapper { height: 400px; border: 1px solid #000; margin: 20px; display: flex; // added for representation purpose only. Bootstrap default class is already added flex-direction: column; } .link-02 { margin-top: auto; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="box-wrapper d-flex flex-column col-4"> <div>incidunt blanditiis debitis</div> <div class="news-box"> <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150"> <p>Labore consectetur doloribus qui ab et qui aut facere quos.</p> </div> <a href="https://oscar.com" target="_blank" class="link-02"> This is moved to bottom with minimal effort </a> </div>
언급된 다른 플렉스 박스 솔루션에 대한 추가 사항:
첫 번째 div에서 flex-grow: 1 을 사용할 수 있습니다. 이렇게 하면 두 번째 div가 맨 아래에 정렬되고 첫 번째 div가 나머지 공간을 모두 덮을 것입니다.
상위 div에서 display: flex 및 flex-direction: column 을 사용해야 합니다.
/* parent-wrapper div */ .container { display: flex; flex-direction: column; } /* first-upper div */ .main { flex-grow: 1; }
바이올린 확인: https://jsfiddle.net/1yj3ve05/
전체 #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; }
코드펜에 표시
나는 언급된 것보다 훨씬 간단한 방법을 고안했습니다.
헤더 div의 높이를 설정합니다. 그런 다음 그 안에 다음과 같이 H1
float: left; padding: 90px 10px 11px
저는 클라이언트를 위한 사이트에서 일하고 있으며 디자인상 특정 div의 맨 아래에 텍스트가 있어야 합니다. 이 두 줄을 사용하여 결과를 얻었으며 잘 작동합니다. 또한 텍스트가 확장되더라도 패딩은 여전히 동일하게 유지됩니다.
기본 부트스트랩 시작 템플릿을 기반으로 하는 이 솔루션을 찾았습니다.
/* 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>
시도:
div.myclass { margin-top: 100%; }
%를 변경하여 수정하십시오. 예: 120% 또는 90% ...등.
방금 클라이언트를 위해 한 사이트는 바닥글 텍스트가 높은 상자라고 요청했으며, 맨 아래에 있는 텍스트는 간단한 패딩으로 이 작업을 수행했으며 모든 브라우저에서 작동해야 합니다.
<div id="footer"> some text here </div>
#footer { padding: 0 30px; padding-top: 60px; padding-bottom: 8px; }
작동하는 것 같습니다:
#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 (eg, <a>) will work without it */ display: inline-block; }
덜 사용하면 CSS 퍼즐을 푸는 것이 코딩과 비슷해집니다. 저는 CSS를 좋아합니다. 하나의 매개변수만 변경하여 전체 레이아웃을 변경할 수 있다는 것은 정말 즐거운 일입니다.
완벽한 크로스 브라우저 예제는 다음과 같습니다.
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에서 작동하는 것이 중요합니다. 또한 이것은 첫 번째 태그여야 하며 그 위에 아무 것도 표시되지 않아야 합니다.
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
천만에요
출처 : http:www.stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom