How can I position my div at the bottom of its con-第3页回答

Given the following HTML:

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

I would like #copyright to stick to the bottom of #container.

Can I achieve this without using absolute positioning? If the float property supported a value of 'bottom' it seems that would do the trick, but unfortunately, it doesn't.

标签： html css

21条回答

深知你不懂我心

2楼-- · 2018-12-31 10:05

Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.

I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

0人赞添加讨论(0) 举报

余欢

3楼-- · 2018-12-31 10:07

You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.

Here you can see it in action.

This is the code:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

0人赞添加讨论(0) 举报

唯独是你

4楼-- · 2018-12-31 10:09

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) 举报

泛滥B

5楼-- · 2018-12-31 10:10

Link here.

HTML:

<div class="overlay">
    <div class="container">
        <div class="height">
          content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

0人赞添加讨论(0) 举报

闭嘴吧你

6楼-- · 2018-12-31 10:11

Try this;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

0人赞添加讨论(0) 举报

人气声优

7楼-- · 2018-12-31 10:12

If you do not know the height of child block:

    #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>

<div id="parent">
  <div class="child">child
  </div> 
  </div>

http://jsbin.com/ULUXIFon/3/edit

If you know the height of the child block add the child block then add padding-top/margin-top :

    #parent{background:green;width:200px;height:130px;padding-top:70px;}
    .child{background:red;vertical-align:bottom;height:130px;}

<div id="parent">
  <div class="child">child
  </div> 
  </div>

0人赞添加讨论(0) 举报

How can I position my div at the bottom of its con

HTML:

CSS:

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间