如何将div放置在其容器的底部？

CSS

小小路易

2020-03-16

鉴于以下HTML：

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

我想#copyright坚持到底#container。

不使用绝对定位就可以实现吗？如果float属性支持'bottom'的值，那似乎可以解决问题，但是不幸的是，事实并非如此。

第1749篇《如何将div放置在其容器的底部？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共22个回答

猿神乐A 2020.03.16

Div of style, position:absolute;bottom:5px;width:100%; is working, But it required more scrollup situation.

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

达蒙斯丁 2020.03.16

根据：w3schools.com

位置为：绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

因此，您需要将父元素放置在相对或绝对位置等位置，并将所需元素放置在绝对位置，然后将底部设置为0。

十三逆天 2020.03.16

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

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

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

Mandy小小斯丁 2020.03.16

float:bottomCSS中没有任何要求。最好的方法是在以下情况下使用定位：

position:absolute;
bottom:0;

小哥阿飞神奇 2020.03.16

对于那些只有一个孩子的容器，您可以使用table-celland vertical-align方法，该方法可靠地将单个div放在其父对象的底部。

请注意，将其table-footer-group用作其他答案将破坏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>

YOC66078158 2020.03.16

这是一种方法，旨在使高度和宽度已知（至少近似）的元素向右浮动并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法将其轻松放置在任何其他角落。

我需要制作一个导航栏，该导航栏的右下角将有实际的链接，并包含随机的同级元素，同时确保导航栏本身可以正确拉伸，而不会破坏布局。我使用了一个“阴影”元素来占据导航栏链接的空间，并将其添加到容器的子节点的末尾。

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

逆天LEY 2020.03.16

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

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

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

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

如果知道子块的高度，请添加子块，然后添加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>

神无小卤蛋樱 2020.03.16

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

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

路易西里阳光 2020.03.16

不想在底部使用“ position：absolute”作为粘性页脚。然后，您可以这样做：

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Near路易蛋蛋 2020.03.16

如果您希望它“粘”在底部，而不管容器的高度如何，那么绝对定位是可行的方法。当然，如果版权元素是容器中的最后一个元素，则无论如何它将始终位于底部。

您能否扩展您的问题？确切说明您要执行的操作（以及为什么不想使用绝对定位）？

伽罗古一 2020.03.16

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

LLEY 2020.03.16

CSS网格

由于CSS Grid的使用在增加，因此我建议align-self网格容器中的元素。

align-self可以包含任何值：end，self-end，flex-end对于下面的例子。

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

樱AItachi 2020.03.16

使用translateY和top属性

只需将子元素元素设置为position：relative，然后将其移动到top：100％（即父元素的高度的100％），然后通过以下转换坚持到父元素的底部：translateY（-100％）（即子元素的高度的-100％孩子）。

好处

您不从页面流中获取元素
它是动态的

但仍然只是解决方法:(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

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

猴子樱 2020.03.16

你可以确实align的方框bottom不使用position:absolute，如果你知道height的#container使用文本对齐的特征inline-block元素。

在这里您可以看到它的实际效果。

这是代码：

#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;
}

留姬杜大爷 2020.03.16

尽管此处提供的答案似乎都不适用于我的特定情况，但我偶然发现了提供此整洁解决方案的这篇文章：

#container {
  display: table;
}

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

我发现这对于将响应式设计应用于移动显示非常有用，而不必重新排列网站的所有html代码，body并将其自身设置为表格。

请注意，只有第一个table-footer-group或table-header-group会这样渲染：如果有多个，则其他将被渲染为table-row-group。

达蒙Davaid斯丁 2020.03.16

CodePen链接在这里。

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

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

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

小哥卡卡西 2020.03.16

尝试这个;

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

小宇宙猪猪乐 2020.03.16

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

纯CSS，没有绝对定位，没有固定任何高度，跨浏览器（IE9 +）

查看工作小提琴

由于正常流程是“自上而下”的，我们不能简单地要求#copyrightdiv在没有绝对定位的情况下坚持其父辈的底部，但是如果我们希望#copyrightdiv坚持其父辈的顶部，它将会非常简单-因为这是正常的流程。

因此，我们将利用这一优势。我们将更改divHTML中s 的顺序，现在#copyrightdiv在顶部，并且内容立即跟随它。我们还使内容div一直延伸（使用伪元素和清除技术）

现在只需要在视图中反转顺序即可。使用CSS转换即可轻松完成。

我们将容器旋转180度，然后：向上-向下。（然后我们将内容取反以再次看起来正常）

如果我们希望在内容区域内有一个scroolbar，则需要多应用一些CSS魔术。作为可呈这里 [在该示例中，内容是标题下方-但其同样的想法]

* {
  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);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

阳光米亚 2020.03.16

flexbox方法！

在受支持的浏览器中，可以使用以下各项：

这里的例子

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

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

这里的例子

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

附带说明，您可能需要添加供应商前缀以提供其他支持。

Green老丝Itachi 2020.03.16

最常见的方法是演示的“ CSS粘性页脚”方法，或者稍微更苗条的变体。如果您的页脚高度固定，则此方法效果很好。

如果您需要一个可变高度的页脚，如果内容太短将显示在窗口底部，如果内容太短则显示在内容底部，该怎么办？

吞下你的骄傲并使用桌子。

例如：

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

试试看。在任何浏览器甚至IE6上，它都适用于任何窗口大小，任何内容量，任何页脚。

如果您不愿意使用表格进行布局，请花一秒钟时间问自己为什么。CSS本来应该使我们的生活更轻松-并且总体上来说-但事实是，即使这些年来，它仍然是残破的，违反直觉的混乱。它不能解决所有问题。还不完整

表格不是很酷，但是至少就目前而言，它们有时是解决设计问题的最佳方法。

凯村村 2020.03.16

div为上述元素创建另一个容器#copyright。在版权的上方添加一个新内容div： <div style="clear:both;"></div> 它将迫使页脚位于其他所有内容的下方，就像使用相对定位（bottom:0px;）一样。

LEYA理查德 2020.03.16

可能不会。

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

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

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android