用ChatGPT解决这个技术问题 Extra ChatGPT

如何将div的内容与底部对齐

假设我有以下 CSS 和 HTML 代码：

#header { 高度：150px; }

标题部分的高度是固定的，但标题内容可能会发生变化。

我希望标题的内容与标题部分的底部垂直对齐，因此最后一行文本“粘”到标题部分的底部。

所以如果只有一行文本，它会像： 

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

如果有三行： 

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

如何在 CSS 中做到这一点？

A
Alan W. Smith

相对+绝对定位是您最好的选择：

#header { 位置：相对；最小高度：150px； } #header-content { 位置：绝对；底部：0；左：0； } #header, #header * { 背景：rgba(40, 40, 100, 0.25); }

但是你可能会遇到问题。当我尝试它时，我遇到了出现在内容下方的下拉菜单的问题。它只是不漂亮。

老实说，对于垂直居中问题，以及项目的任何垂直对齐问题都不是固定高度，使用表格更容易。

示例：Can you do this HTML layout without using tables?

我实际上在问这里之前找到了该解决方案，但不知何故忘记添加位置：相对；到标题 div 并且内容一直停留在页面底部。谢谢
您可以使用 z-index 属性管理您的下拉位置，将其置于最前面。请记住，z-index 属性适用于相对或绝对定位的元素。此外，从语义上讲，使用表格来实现布局结果是不正确的。
对于原始问题中描述的文本内容，#header-content 实际上应该是一个 p 元素，或者至少是一个 span
不要将表格用于非表格数据！而是使用 CSS 显示属性 display: table-cell、table-row 或 table。您再也不需要使用表格进行纯布局。
标题位置相对于什么？
j
johannchopin

如果您不担心旧版浏览器，请使用 flexbox。

父元素需要将其显示类型设置为 flex 

div.parent {
  display: flex;
  height: 100%;
}

然后将子元素的 align-self 设置为 flex-end。 

span.child {
  display: inline-block;
  align-self: flex-end;
}

这是我以前学习的资源：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

@bafromca，两个不起作用的原因。 1：使用'align-self'而不是align-items（我的错，我编辑了我的原始帖子）。 2：除非父母有高度，否则 100% 高度将不起作用。
对我不起作用，我希望它位于容器的底部，而不是容器中物品的末端。
在 2020 年，这应该是正确答案：caniuse.com/#feat=flexbox
我认为这是比相对绝对更好的答案，它更灵活
P
Peter Mortensen

使用 CSS 定位： 

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

作为 cletus noted，您需要确定标头内容才能使其工作。 

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
仅供参考 ...这导致我的标题内容折叠其宽度，所以我必须在标题内容上添加一个 width = '100%'
@dsdsdsdsd 您也可以通过将 display:block 添加到#header-content 来解决这个问题。
@dsdsdsdsd 原因是因为 <span> 元素默认具有 display: inline; ，它不会占用容器的整个宽度。最合适的解决方法是将跨度更改为 <div>，默认情况下它是一个块元素。
或者

-

之一，默认情况下也是块，并将文本标识为标题，这对搜索引擎、辅助技术和阅读代码的人很有用。
当底部的内容具有可变高度时不起作用，导致它超出容器边界。
j
johannchopin

我使用这些属性并且它有效！ 

#header {
  display: table-cell;
  vertical-align: bottom;
}
IE8 及更早版本不支持。 IE9 支持。
@cale_b 根据 caniuse.com，它 DOES 在 IE8 中工作。
@ZachL Happenstance - 我正在为企业客户支持 IE8 中的旧版应用程序，这确实有效。
@fguillen：刚刚也在 Chrome (v31) 中进行了测试。也在那里工作。
table-cell 破坏了很多东西。就像 Bootstrap 网格系统一样。 col-md-12 不会再给你一个 100% 宽的 div。
d
dylan-myers

在同一个问题苦苦挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案：

不需要我知道容器的高度。

与相对+绝对解决方案不同，内容不浮动在自己的层中（即，它通常嵌入到容器 div 中）。

跨浏览器（IE8+）工作。

实施简单。

解决方案只需要一个 <div>，我称之为“对齐器”：

CSS 

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html 

<div class="bottom_aligner"></div>
... Your content here ...

这个技巧通过创建一个又高又瘦的 div 来实现，它将文本基线推到容器的底部。

这是一个完整的示例，可以实现 OP 的要求。我将“bottom_aligner”变厚变红，仅用于演示目的。

CSS： 

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML： 

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

https://i.stack.imgur.com/8Eks6.jpg

几乎完美:) 但它不允许自动换行。
如果外部容器可以滚动（溢出-y：自动），则不起作用。 :(
我猜 marin:8px 应该是 margin:8px
如果放入 ::before 规则，这也有效，这消除了对额外元素的需要。我们最后使用了 flex，但是当你不能使用时，这很有用。
这是一个非常好的解决方案。它仅在盒子/容器的 height 和 设置（设置为 px 或 % 或其他）时才有效。
S
Stickers

执行此操作的现代方法是使用 flexbox。请参见下面的示例。您甚至不需要将 Some text... 包装到任何 HTML 标记中，因为直接包含在弹性容器中的文本被包装在匿名弹性项目中。

header { 边框：1px 纯蓝色；高度：150px；显示：弯曲； /* 定义 flexbox */ flex-direction: column; /* 从上到下 */ justify-content: space-between; /* 第一项在开始，最后在结束 */ } h1 { margin: 0; }

标题标题

一些文本与底部对齐

如果只有一些文本并且您想垂直对齐到容器的底部。

部分{边框：1px纯蓝色；高度：150px；显示：弯曲； /* 定义 flexbox */ align-items: flex-end; /* 框的底部 */ }

一些文本与底部对齐

我需要我的底部对齐元素仍然存在于文档流中，这在使用 position:absolute; 时是不可能的。该解决方案非常适合我的情况！
在 react 组件内部，这是正确的解决方案。接受的解决方案失败。
这是唯一对我有用的解决方案。也许它与 React 有关，正如@Soleil 所提到的......我不是 CSS 专家，所以我不完全确定。
在反应组件中完美运行
在反应中工作。您可以使用 justify-content: center; 使文本底部居中。
P
Pang 
display: flex;
align-items: flex-end;
请注意，旧浏览器中的 flexbox 不是 well supported。
@AnthonyB - 定义旧？作为开发人员，我们必须改变这个记录。技术向前发展，旧的根本无法生存。据我所知，IE9 和 10 的 flex 存在问题，但它们分别于 2011 年和 2012 年发布……现在是 2017 年。我们必须放弃这些过时和损坏的浏览器。如果不是为了视觉上的满足，而是为了安全和一般软件更新。
@Tisch，您是绝对正确的，作为开发人员，我们必须使用体面的最新技术。但我只是警告这个兼容性问题，以免感到惊讶。
如果 <h1> 下的内容在 <p> 或 <div> 内，我会使用 justify-content: space-between。
I
Igor Ivancha

如果父/块元素的行高大于内联元素的行高，则内联或内联块元素可以与块级元素的底部对齐。*

标记： 

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

*确保您处于标准模式

M
MK Vimalan

你可以简单地实现 flex

header { 边框：1px 纯蓝色；高度：150px；显示：弯曲； /* 定义 flexbox */ flex-direction: column; /* 从上到下 */ justify-content: space-between; /* 第一项在开始，最后在结束 */ } h1 { margin: 0; }

标题标题

一些文本与底部对齐

M
Maik Lowrey

我多次遇到这个问题，有很好的解决方案，但也不是很好。因此，您可以使用 flexbox、网格系统或显示表格以不同的方式实现这一点。我首选的变体是 flex 和 'margin-bottom: auto' 的混合。这是我个人收集的文本底部可能性：

1. Flex/margin-top：自动；

.parent { 最小高度：200px;背景：绿色；显示：弯曲； } .child { 边距顶部：自动；背景：红色；填充：5px；白颜色; }

底部文本

2.flex/align-self: flex-end

.parent { 显示：弹性；最小高度：200px；背景：绿色； } .child { 对齐自我：flex-end;背景：红色；填充：5px；白颜色; }

底部文本

3.flex/align-items：flex-end；

.parent { 最小高度：200px;背景：绿色；显示：弯曲；对齐项目：flex-end； } .child { 填充：5px;背景：红色；白颜色; }

底部文本

4.grid/align-self:end；

.parent { 最小高度：200px;背景：绿色；显示：网格； } .child { 对齐自我：结束；背景：红色；填充：5px；白颜色; }

底部文本

5.表格/垂直对齐：底部；

个人我不喜欢这种使用表格的方法。

.parent { 最小高度：200px;背景：绿色；显示：表格；宽度：100%； } .child { 显示：表格单元格；垂直对齐：底部；背景：红色；填充：5px；白颜色; }

底部文本

带垫片

6. 弯曲； /弹性：1；

.parent { 最小高度：200px;背景：绿色；显示：弯曲；弹性流：列； } .spacer { 弹性：1； } .child { 填充：5px;背景：红色；白颜色; }

底部文本

7.flex/flex-grow：1个；

.parent { 最小高度：200px;背景：绿色；显示：弯曲；弹性方向：列； } .spacer { 弹性增长：1； } .child { 填充：5px;背景：红色；白颜色; }

底部文本

8. 内联块/PseudoClass::before

.parent { 最小高度：200px;背景：绿色； } .child::before { display:inline-block;内容：'';高度：100%；垂直对齐：底部； } .child { 高度：200px;填充：5px；背景：红色；白颜色; }

底部文本

❤️ 我个人喜欢的版本是：1., 2. 和 3.

A
Ayan

您可以使用以下方法：

.header-parent { 高度：150px;显示：网格； } .header-content { 对齐自我：结束； }

标题标题

标题内容

T
Temani Afif

这是另一种使用 flexbox 但不使用 flex-end 进行底部对齐的解决方案。想法是将 h1 上的 margin-bottom 设置为 auto 以将剩余内容推到底部：

#header { 高度：350px;显示：弹性；弹性方向：列；边框：1px 实心； } #header h1 { 边距底部：自动； }

我们也可以对文本使用 margin-top:auto 执行相同的操作，但在这种情况下，我们需要将其包装在 div 或 span 中：

#header { 高度：350px;显示：弹性；弹性方向：列；边框：1px 实心； } #header span { 边距顶部：自动； }

迄今为止最好的解决方案！因为它支持 overflow-y: auto（其他解决方案不支持）。
边缘顶部的绝佳解决方案：汽车受到启发。
I
Igor Ivancha

如果您有多个动态高度项，请使用表格和表格单元格的 CSS 显示值：

HTML 

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS 

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

我在这里创建了一个 JSBin 演示：http://jsbin.com/INOnAkuF/2/edit

该演示还有一个示例，如何使用相同的技术进行垂直居中对齐。

V
Vinu Prasad

将 div 移动到底部的最佳解决方案如下。基本上，您需要做的是将 display flex 和 flex-direction 设置为父列，并为其子项添加一个“margin-top：auto”，该子项需要浮动到容器底部注意：我用过引导程序及其类。

.box-wrapper { 高度：400px;边框：1px 实心#000；边距：20px；显示：弯曲； // 添加仅用于表示目的。 Bootstrap 默认类已经添加 flex-direction: column; } .link-02 { 边距顶部：自动； }

incidunt blanditiis debitis
non ipsam nihil

Labore consectetur doloribus qui ab et qui aut facere quos。

以最小的努力将其移至底部

M
Mozfet

所有这些答案都对我有用……我不是 flexbox 专家，但这很容易弄清楚，它简单易懂和易于使用。要将某些内容与其余内容分开，请插入一个空 div 并让它增长以填充空间。

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>

当底部内容的大小不固定时，即使容器大小不固定，这也会按预期做出反应。

A
Aditya Ponkshe

为此，您不需要绝对+相对。很有可能使用容器和数据的相对位置。这就是你的做法。

假设您的数据高度为 x。您的容器是相对的，页脚也是相对的。您所要做的就是添加到您的数据中 

bottom: -webkit-calc(-100% + x);

您的数据将始终位于容器的底部。即使您有具有动态高度的容器也可以使用。

HTML会是这样的 

<div class="container">
  <div class="data"></div>
</div>

CSS会是这样的 

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live example here

希望这可以帮助。

您能解释一下 bottom: -webkit-calc(-100% + x); 在做什么吗？
@mhatch 它将页脚保留在容器的底部。
a
absynthe minded web smith

这是灵活的方法。当然，IE8 不支持它，因为用户在 7 年前就需要它。根据您需要支持的内容，其中一些可以取消。

尽管如此，如果有一种方法可以在没有外部容器的情况下做到这一点，那就太好了，只需让文本在它自己的内部对齐即可。 

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}
P
Pablo Contreras

一个非常简单的单行解决方案是在 div 中添加 line-heigth，记住所有 div 的文本都会放在底部。

CSS： 

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML： 

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

请记住，这是一个实用且快速的解决方案，当您只希望 div 中的文本下降时，如果您需要组合图像和内容，您将不得不编写更复杂和响应式的 CSS

t
treecon

除了提到的其他 flex-box 解决方案之外：

您可以在第一个 div 上使用 flex-grow: 1。这样，您的第二个 div 将与底部对齐，而第一个 div 将覆盖所有剩余空间。

在父 div 上，您必须使用 display: flex 和 flex-direction: column。

https://i.stack.imgur.com/cphU7.png 

/* parent-wrapper div */
.container {
  display: flex;
  flex-direction: column;
}

/* first-upper div */
.main {
  flex-grow: 1;
}

检查小提琴：https://jsfiddle.net/1yj3ve05/

c
codeboy

如果您可以设置内容的包装div的高度（#header-content如其他回复所示），而不是整个#header，也许您也可以尝试这种方法：

HTML 

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS 

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

show on codepen

X
XMedia Software

我发现这个解决方案基于默认的引导启动模板 

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}
I
Ibo 
#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header { 高度：250px;显示：弹性；弹性方向：列；背景颜色：黄色； } .top{ 弹性：1； }

这会导致顶部 div 的大小调整。这适用于基本的文本布局，但当事物具有要尊重的背景、颜色和大小时则不起作用。
P
Peter Mortensen

我设计了一种比上面提到的方法简单得多的方法。

设置标题 div 的高度。然后在其中设置 H1 标记的样式，如下所示： 

float: left;
padding: 90px 10px 11px

我正在为客户开发一个网站，设计要求文本位于某个 div 的底部。我已经使用这两行实现了结果，并且效果很好。此外，如果文本确实扩展，填充将保持不变。

使用响应式布局调整屏幕大小时，将导致内容浮动在其他内容之上。
f
felix

尝试： 

div.myclass { margin-top: 100%; }

尝试更改 % 来修复它。示例：120% 或 90% ...等。

与 1 组内容完美配合，但如果内容发生变化，则需要进行调整。如果是动态内容，请不要使用它！
I
Igor Ivancha

我刚刚为客户做的网站要求页脚文本是一个高框，底部的文本我通过简单的填充实现了这一点，应该适用于所有浏览器。 

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
您的第一个声明 padding: 0 30px 有点多余，您不妨将 padding: 30px 放在其他 2 个声明之后。
绝对正确，但是我正在遵循我工作场所的做法。
真的吗？，这似乎是普通的坏做法。只需使用速记，或在任何地方都明确。 padding: 60px 30px 8px;、padding: 60px 30px 8px 30px;、四个明确的 padding- 规则，甚至 @TheWaxMann 的建议都是优越的 - 我愿意并且能够争辩说一个 ;-)
e
esp

似乎正在工作： 

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

使用 less 使解决 CSS 谜题更像是编码而不是像……我只是喜欢 CSS。当您只需更改一个参数即可更改整个布局（而不破坏它:)，这是一种真正的乐趣。

T
Thomas

一个完美的跨浏览器示例可能是这里：

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

这个想法是既要在底部显示 div 又要让它粘在那里。通常，简单的方法会使粘性 div 与主要内容一起向上滚动。

以下是一个完全工作的最小示例。请注意，不需要 div 嵌入技巧。许多BR只是为了强制出现滚动条： 

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

如果您想知道您的代码可能无法在 IE 上运行，请记住在顶部添加 DOCTYPE 标记。这在 IE 上工作是至关重要的。此外，这应该是第一个标签，其上方不应出现任何内容。

由于您将文档声明为严格的 XHTML，您还应该自行关闭 <br /> 标记...
@KarlKildén 如果您指的是来自 aaamos 的评论，那绝对不是一个愚蠢的评论 - 使用其 correct content-type header 提供上述文档会导致浏览器抛出 xml 解析错误。
这是一个不好的做法！改用 CSS！
j
jmp

2015年解决方案 

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

别客气

为此的表格布局可能会出现问题；建议改为使用 CSS。 HTML5 也不支持 valign 属性。 （见w3schools.com/tags/att_td_valign.asp）

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.