关于html：我如何将div放在容器的底部？


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

给出以下HTML：

1
2
3
  <!-- Other elements here -->
 
    Copyright Foo web designs

我想让#copyright贴在#container的底部。

我能在不使用绝对定位的情况下实现这一点吗？如果float属性支持"bottom"的值，这似乎可以解决问题，但不幸的是，它没有。

相关讨论

可能不会。

将position:relative分配给#container，然后将position:absolute; bottom:0;分配给#copyright。

1
2
3
4
5
6
7
#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
1
2
3
  <!-- Other elements here -->
 
    Copyright Foo web designs

相关讨论

实际上，@user接受的答案只有在窗口高且内容短的情况下才有效。但是，如果内容很高，窗口很短，它会将版权信息放在页面内容上，然后向下滚动查看内容，会留下一个浮动的版权通知。这使得这个解决方案对大多数页面(实际上像这个页面)都是无用的。

最常见的方法是演示的"css Sticky Footer"方法，或者稍微精简一些。这种方法非常有效——如果您有固定高度的页脚。

如果您需要一个可变高度的页脚，如果内容太短，它将出现在窗口底部；如果窗口太短，它将出现在内容底部，您会怎么做？

放下你的骄傲，用一张桌子。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

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

4

试试看。这将适用于任何窗口大小、任何内容量、任何大小的页脚、每个浏览器…甚至IE6。

如果你一想到要用一张桌子来排版就畏缩不前，花点时间问问自己为什么。CSS本来是为了让我们的生活更容易——总体上来说，它已经——但事实是，即使经过这么多年，它仍然是一个破碎的，反直觉的混乱。它不能解决所有的问题。它是不完整的。

表并不酷，但至少现在，它们有时是解决设计问题的最佳方法。

相关讨论

flexbox方法！

在支持的浏览器中，您可以使用以下内容：

这里例子

1
2
3
4
5
6
7
.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}
1
  Align to the bottom

上面的解决方案可能更灵活，但是，这里有一个替代方案：

这里例子

1
2
3
4
5
6
.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

1
2
3
4
5
6
7
8
9
10
11
.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}
1
  Align to the bottom

作为补充说明，您可能希望添加供应商前缀以获得更多支持。

相关讨论

是的，您可以在不使用absolute定位和不使用table的情况下进行此操作(使用带标记的螺钉等)。

演示文稿
这是测试工作在IE>7，铬，FF&；是一个非常容易添加到您的现有布局。

1
2
3
4
5
6
    Some content you don't want affected by the"bottom floating" div
    supports not just text

   
        Some other content you want kept to the bottom
        this is in a div
1
2
3
4
5
6
7
8
9
10
11
#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

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

它有效地实现了float:bottom所希望的，甚至可以解释@rick reilly的答案中指出的问题！

相关讨论

这是一个古老的问题，但这是一种独特的方法，在某些情况下可以有所帮助。

纯CSS，无绝对定位，无固定高度，跨浏览器(IE9+)

看看那个工作的小提琴

因为正态流是"自上而下"的，我们不能简单地要求#copyrightdiv在没有某种绝对定位的情况下坚持在他父母的底部，但是如果我们希望#copyrightdiv坚持在他父母的顶部，这将非常简单，因为这是正态流方式。

所以我们会利用这个优势。我们将更改HTML中div的顺序，现在#copyrightDIV位于顶部，内容将立即跟随它。我们还使内容DIV一直延伸(使用伪元素和清除技术)

现在，这只是在视图中颠倒顺序的问题。这可以用CSS转换轻松完成。

我们将容器旋转180度，现在：向上是向下的。(我们将内容倒过来，使其看起来再次正常)

如果我们想要在内容区域内有一个Scroolbar，我们需要应用更多的CSS魔力。如这里所示[在该示例中，内容位于标题下方-但其想法相同]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

4

相关讨论

试试这个；

1
2
3
4
5
  <!-- Other elements here -->
 


   Copyright Foo web designs
相关讨论

为#copyright上的元素创建另一个容器div。在上面加上一个新的div：它将强制页脚位于所有其他项下，就像使用相对定位(bottom:0px;的情况一样。

虽然这里提供的所有答案似乎都不适用于我的特定案例，但我看到了这篇文章，它提供了一个简洁的解决方案：

1
2
3
4
5
6
7
#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

我发现它非常有助于在移动显示器上应用响应式设计，而无需重新排序网站的所有HTML代码，将body本身设置为一个表。

请注意，只有第一个table-footer-group或table-header-group将被视为：如果有多个，其他的将被视为table-row-group。

如果您知道#container的height使用inline-block元素的文本对齐功能，那么您确实可以在不使用position:absolute的情况下使用bottom的框。

在这里你可以看到它的作用。

这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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;
}

这里是代码笔链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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;
}
1
2
3
4
5
6
            content
       
   

   
        footer

使用translatey和top属性

只需将element child设置为position:relative，然后将其向上移动：100%(即父元素的100%高度)，然后通过transform:translatey(即子元素高度的-100%)将其固定在父元素的底部。

效益

  • 不从页面流中提取元素
  • 它是动态的

但仍需解决：(

1
2
3
4
5
.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

不要忘记旧浏览器的前缀。

如果你想让它"粘"到底，不管容器的高度如何，那么绝对定位就是你要走的路。当然，如果copyright元素是容器中的最后一个元素，那么它始终位于底部。

你能详细讨论一下你的问题吗？准确地解释你想做什么(以及为什么你不想使用绝对定位)？

另外，如果有关于使用position:absolute;或position:relative;的规定，您可以尝试使用padding父级div或放置margin-top:x;。在大多数情况下，这不是一个很好的方法，但在某些情况下，它可能会派上用场。

如果您不知道子块的高度：

1
2
3
4
5
6
7
8
9
    #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>


  child

http://jsbin.com/uluxifon/3/edit/编辑

如果知道子块的高度，请添加子块，然后添加填充顶部/边距顶部：

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


  child

也许这对某些人有帮助：您可以将DIV放在另一个DIV之外，然后使用负边距将其向上推：

1
2
3
4
  Hello!


  Copyright Foo web designs

对于容器中只有一个子级的对象，可以使用table-cell和vertical-align方法，该方法可靠地将单个div定位在其父级的底部。

注意，使用table-footer-group作为上述其他答案将打破父级table的高度计算。

1
2
3
4
5
6
7
8
9
#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
1
    Single bottom item

仅仅因为这一点没有被提及，在像你这样的情况下通常会很好地工作：

将copyright div放在container div之后

您只需要以与另一个容器类似的方式(相同的总宽度、居中等)格式化版权DIV，一切都很好。

CSS：

1
2
3
4
#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML：

1
2
3
4
5
    <!-- Other elements here -->



    Copyright Foo web designs

唯一可能不理想的时间是，当您的container div使用height:100%声明时，用户需要向下滚动查看版权。但即使如此，你仍然可以四处工作(例如，margin-top:-20px——当你的版权元素高度为20px时)。

  • 无绝对定位
  • 无表格布局
  • 没有疯狂的CSS，在其他浏览器中看起来都不一样(至少，你知道)
  • 简单明了的格式

旁白：我知道手术室要求的解决方案是"…贴在"容器"分区的底部……，而不是它下面的东西，但拜托，人们正在寻找好的解决方案，这就是一个！

相关讨论

CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位：

1
2
position:absolute;
bottom:0;
相关讨论

1
2
3
 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
1
2
3
  <!-- Other elements here -->
 
    Copyright Foo web designs

1
2
3
  <!-- Other elements here -->
 
    Copyright Foo web designs

这里有一种方法，目标是使具有已知高度和宽度(至少大约)的元素向右浮动并保持在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将其放置在任何其他角落。

我需要制作一个导航栏，它的右下角将有实际的链接，以及随机的兄弟元素，同时确保导航栏本身能够正确拉伸，而不会破坏布局。我使用了一个"shadow"元素来占据导航栏的链接空间，并将其添加到容器子节点的末尾。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>

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


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

样式分区，position:absolute;bottom:5px;width:100%;正在工作，但它需要更多的滚动情况。

1
2
3
4
5
window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position ="fixed";
    v.style.bottom ="5px";
}