How can I position my div at the bottom of its container?

前端未结

关注

 24  2427

广开言路

Given the following HTML:

相关标签:

24条回答

無奈伤痛

2020-11-22 01:29
Actually, the accepted answer by @User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).

The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.

If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?

Swallow your pride and use a table.

For example:
```
* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
```
```
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
```
Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.

If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.

Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.
0 讨论(0)
发布评论:

提交评论
- 加载中...
星月不相逢

2020-11-22 01:30
Using the translateY and top property

Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).

BenefitS
- you do not take the element from the page flow
- it is dynamic
But still just workaround :(
```
.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}
```
Don't forget prefixes for the older browser.
0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2020-11-22 01:32
For those only have one child in the container, you can use the table-cell and vertical-align approach which worked reliably for positioning a single div at the bottom of its parent.

Note that using table-footer-group as other answers mentioned will break the height calculation of parent table.
```
#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
```
```
<div id="container">
    <div id="item">Single bottom item</div>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

隐瞒了意图╮

2020-11-22 01:34

Likely not.

Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

0 讨论(0)

借酒劲吻你

2020-11-22 01:34

Yes you can do this without absolute positioning and without using tables (which screw with markup and such).

DEMO
This is tested to work on IE>7, chrome, FF & is a really easy thing to add to your existing layout.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

It effectively does what float:bottom would, even accounting for the issue pointed out in @Rick Reilly's answer!

0 讨论(0)

野性不改

2020-11-22 01:35

CSS Grid

Since the usage of CSS Grid is increasing, I would like to suggest align-self to the element that is inside a grid container.

align-self can contain any of the values: end, self-end, flex-end for the following example.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

0 讨论(0)

热议问题

How can I position my div at the bottom of its container?

Using the translateY and top property

CSS Grid