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

2020-03-13

说我有以下CSS和HTML代码：

#header {
  height: 150px;
}

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

标头部分的高度固定，但是标头内容可能会更改。

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

因此，如果只有一行文本，则将是：

-----------------------------
| 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中完成此操作？

2020/03/13 20:39:45

try with:

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

try changing the % to fix it. Example: 120% or 90% ...etc.

梅Near米亚2020/03/13 20:39:45

The site I just did for a client requested that the footer text was a high box, with the text at the bottom I achieved this with simple padding, should work for all browsers.

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

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Near路易蛋蛋2020/03/13 20:39:45

I found this solution bassed on a default bootstrap start template

/* 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;

}

神乐飞云逆天2020/03/13 20:39:45

#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 {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

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

古一梅2020/03/13 20:39:45

Here is another solution using flexbox but without using flex-end for bottom alignment. The idea is to set margin-bottom on h1 to auto to push the remaining content to the bottom:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

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

We can also do the same with margin-top:auto on the text but in this case we need to wrap it inside a div or span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

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

神奇Mandy2020/03/13 20:39:45

您可以简单地实现弹性

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

猴子Davaid神乐2020/03/13 20:39:45

display: flex;
align-items: flex-end;

斯丁泡芙2020/03/13 20:39:44

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

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

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

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Harry小卤蛋2020/03/13 20:39:44

如果您不担心旧版浏览器，请使用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/

2020/03/13 20:39:44

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

#header {
  display: table-cell;
  vertical-align: bottom;
}

泡芙Tom2020/03/13 20:39:44

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

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

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

坦白地说，对于垂直居中问题以及项目的垂直对齐问题并非固定高度，仅使用表格会更容易。

示例：您可以在不使用表的情况下进行HTML布局吗？

Newest Answer

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

5 Answer

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

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer