I have a div
with some children:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
and I want the following layout:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Regardless how much text is in the p
I want to stick the .button
always at the bottom without taking it out of the flow. I've heard this can be achievable with Flexbox but I can't get it to work.
Try This
.content {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
height: 250px;_x000D_
width: 200px;_x000D_
border: solid;_x000D_
word-wrap: break-word;_x000D_
}_x000D_
_x000D_
.content h1 , .content h2 {_x000D_
margin-bottom: 0px;_x000D_
}_x000D_
_x000D_
.content p {_x000D_
flex: 1;_x000D_
}
_x000D_
<div class="content">_x000D_
<h1>heading 1</h1>_x000D_
<h2>heading 2</h2>_x000D_
<p>Some more or less text</p>_x000D_
<a href="/" class="button">Click me</a>_x000D_
</div>
_x000D_
Not sure about flexbox but you can do using the position property.
set parent div
position: relative
and child element which might be an <p>
or <h1>
etc.. set position: absolute
and bottom: 0
.
Example:
index.html
<div class="parent">
<p>Child</p>
</div>
style.css
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
The solution with align-self: flex-end;
didn't work for me but this one did in case you want to use flex:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Note: When "running the code snippet" you have to scroll down to see the link at the bottom.
.content {_x000D_
display: flex;_x000D_
justify-content: space-between;_x000D_
flex-direction: column;_x000D_
height: 300px;_x000D_
}_x000D_
_x000D_
.content .upper {_x000D_
justify-content: normal;_x000D_
}_x000D_
_x000D_
/* Just to show container boundaries */_x000D_
.content .upper, .content .bottom, .content .upper > * {_x000D_
border: 1px solid #ccc;_x000D_
}
_x000D_
<div class="content">_x000D_
<div class="upper">_x000D_
<h1>heading 1</h1>_x000D_
<h2>heading 2</h2>_x000D_
<p>paragraph text</p>_x000D_
</div>_x000D_
_x000D_
<div class="bottom">_x000D_
<a href="/" class="button">link button</a>_x000D_
</div>_x000D_
</div>
_x000D_
I just found a solution for this.
for those who are not satisfied with the given answers can try this approach with flexbox
CSS
.myFlexContainer {
display: flex;
width: 100%;
}
.myFlexChild {
width: 100%;
display: flex;
/*
* set this property if this is set to column by other css class
* that is used by your target element
*/
flex-direction: row;
/*
* necessary for our goal
*/
flex-wrap: wrap;
height: 500px;
}
/* the element you want to put at the bottom */
.myTargetElement {
/*
* will not work unless flex-wrap is set to wrap and
* flex-direction is set to row
*/
align-self: flex-end;
}
HTML
<div class="myFlexContainer">
<div class="myFlexChild">
<p>this is just sample</p>
<a class="myTargetElement" href="#">set this to bottom</a>
</div>
</div>
1. Style parent element: style="display:flex; flex-direction:column; flex:1;"
2. Style the element you want to stay at bottom: style="margin-top: auto;"
3. Done! Wow. That was easy.
Example:
<section style="display:flex; flex-wrap:wrap;"> // For demo, not necessary
<div style="display:flex; flex-direction:column; flex:1;"> // Parent element
<button style="margin-top: auto;"> I </button> // Target element
</div>
... 5 more identical divs, for demo ...
</section>
When setting your display to flex, you could simply use the flex
property to mark which content can grow and which content cannot.
div.content {_x000D_
height: 300px;_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
}_x000D_
_x000D_
div.up {_x000D_
flex: 1;_x000D_
}_x000D_
_x000D_
div.down {_x000D_
flex: none;_x000D_
}
_x000D_
<div class="content">_x000D_
<div class="up">_x000D_
<h1>heading 1</h1>_x000D_
<h2>heading 2</h2>_x000D_
<p>Some more or less text</p>_x000D_
</div>_x000D_
_x000D_
<div class="down">_x000D_
<a href="/" class="button">Click me</a>_x000D_
</div>_x000D_
</div>
_x000D_
You can use display: flex to position an element to the bottom, but I do not think you want to use flex in this case, as it will affect all of your elements.
To position an element to the bottom using flex try this:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
Your best bet is to set position: absolute to the button and set it to bottom: 0
, or you can place the button outside the container and use negative transform: translateY(-100%)
to bring it in the container like this:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Check this JSFiddle
Source: Stackoverflow.com