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

#标题{ 身高:150 px; } < div id = "头" > <标题>标题< / h1 > 标题内容(一行或多行) < / 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中做到这一点?


当前回答

相对+绝对定位是你最好的选择:

#标题{ 位置:相对; 最小高度:150 px; } #标题内容{ 位置:绝对的; 底部:0; 左:0; } #header, #header * { 背景:rgba(40,40,100,0.25); } < div id = "头" > h1标题< h1 > < / > 在最后一个地方,情况可能不是这样,他们会长期存在,会深深地扎根,不会轻易被铲除。修改宪法的计划,为了纠正最近的违反宪法的行为,以及其他目的,实际上已经在一个州尝试过了 < / div >

但你可能会遇到问题。当我尝试它时,我遇到了下拉菜单出现在内容下面的问题。这并不漂亮。

老实说,对于垂直定心问题,以及任何与物品的垂直对齐问题都不是固定高度的问题,使用表格更容易。

例子:你可以不使用表格来做这个HTML布局吗?

其他回答

我遇到过这个问题几次,有很好的解决方案,但也有不太好的。因此,您可以使用flexbox、网格系统或显示表以不同的方式实现这一点。我更喜欢flex和margin-bottom: auto的组合。以下是我个人收集的文本底部可能性:

1. Flex / margin-top: auto;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; } .child { margin-top:汽车; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

2. Flex / align-self: Flex -end

.parent { 显示:flex; 最小高度:200 px; 背景:绿色; } .child { align-self: flex-end; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

3.Flex / align-items: Flex -end;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; 对齐项目:flex-end; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

4. Grid / align-self:结束;

.parent { 最小高度:200 px; 背景:绿色; 显示:网格; } .child { align-self:结束; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

5. 表/垂直对齐:底部;

就个人而言,我不喜欢这种处理表格的方法。

.parent { 最小高度:200 px; 背景:绿色; 显示:表; 宽度:100%; } .child { 显示:表格单元; vertical-align:底部; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

用垫片

6. Flex;/ flex: 1;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-flow:列; } .spacer { flex: 1; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >

7. Flex / Flex -grow: 1;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-direction:列; } .spacer { flex-grow: 1; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >

8. Inline-block / PseudoClass::before

.parent { 最小高度:200 px; 背景:绿色; } {前.child:: 显示:inline-block; 内容:”; 高度:100%; vertical-align:底部; } .child { 身高:200 px; 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

❤️我个人比较喜欢的版本是:, 2. 和3。

一个完美的跨浏览器的例子是:

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上运行这是至关重要的。此外,这应该是第一个标签,上面不应该出现任何东西。

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

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

}

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

你的欢迎

似乎起作用了:

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

使用较少使解决CSS谜题更像编码而不是像…我就是喜欢CSS。这是一个真正的乐趣,当你可以改变整个布局(而不破坏它:)只是改变一个参数。