How to align content of a div to the bottom

后端未结

关注

 26  2495

挽巷

Say I have the following CSS and HTML code:

相关标签:

26条回答

误落风尘

2020-11-22 02:00
Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*

markup:
```
<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;
}
```
*make sure you're in standards mode
0 讨论(0)
发布评论:

提交评论
- 加载中...

轻奢々

2020-11-22 02:01

The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text... into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.

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>

If there is only some text and you want to align vertically to the bottom of the container.

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>

0 讨论(0)

感动是毒

2020-11-22 02:01
All these answers and none worked for me... I'm no flexbox expert, but this was reasonably easy to figure out, it is simple and easy to understand and use. To separate something from the rest of the content, insert an empty div and let it grow to fill the space.

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>
```
This reacts as expected when the bottom content is not fixed sized also when the container is not fixed sized.
0 讨论(0)
发布评论:

提交评论
- 加载中...
-上瘾入骨i

2020-11-22 02:05
Relative+absolute positioning is your best bet:
```
#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>
```
But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.

Example: Can you do this HTML layout without using tables?
0 讨论(0)
发布评论:

提交评论
- 加载中...
深忆病人

2020-11-22 02:05
Seems to be working:

HTML: I'm at the bottom

css:
```
h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

一个人的身影

2020-11-22 02:05

A perfect cross-browser example is probably this one here:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

The idea is both to display the div at the bottom and also making it stick there. Often the simple approach will make the sticky div scroll up with the main content.

Following is a fully working minimal example. Note that there's no div embedding trickery required. The many BRs are just to force a scrollbar to appear:

<!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>

If you are wondering your code might not be working on IE, remember to add the DOCTYPE tag at the top. It's crucial for this to work on IE. Also, this should be the first tag and nothing should appear above it.

0 讨论(0)

热议问题