提问



说我有以下CSS和HTML代码:




#header {
  height: 150px;
}

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



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




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



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


正如克莱图斯所指出的那样,你需要确定标题内容才能使其发挥作用。


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

最佳参考


我使用这些属性,它的工作原理!


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

其它参考1


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


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


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


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


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


这是我过去学习的资源:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/[50]

其它参考2


经过一段时间的努力,我终于找到了满足我所有要求的解决方案:



  • 不要求我知道容器的高度。

  • 与相对+绝对解决方案不同,内容不会漂浮在自己的层中(即,它通常嵌入在容器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>




其它参考3


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


标记:


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


*确保你处于标准模式

其它参考4


现代的方法是使用 flexbox 。请参阅下面的示例。你甚至不需要将Some text...包装到任何HTML标签中,因为直接包含在flex容器中的文本被包装在一个匿名的flex项中。[51]




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>



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

其它参考5


如果您有多个动态高度项,请使用table和table-cell的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[52]


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

其它参考6


你不需要绝对+亲戚。很可能使用容器和数据的相对位置。这就是你如何做到的。


假设您的数据高度为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);
}


这里的实例[53]


希望这可以帮助。

其它参考7


这是一种灵活的方式。当然,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;
}

其它参考8


我知道这已经超过2年了,但我已经设计出了一种比提到的方式简单得多的方法。


设置标题div的高度。然后在里面,为你的H1标签设置如下样式:


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


我正在为客户工作一个网站,设计要求文本位于某个div的底部。我已经使用这两行获得了结果,并且它工作正常。此外,如果文本确实展开,填充仍将保持不变。

其它参考9


如果你可以设置内容的包装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;
}


在codepen上显示[54]

其它参考10


似乎工作:


HTML:
    我在底部


CSS:


h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

其它参考11


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


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

}

其它参考12


这是使用flexbox的另一种解决方案,但没有使用 flex-end 进行底部对齐。我们的想法是将 h1 上的margin-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>



一个非常简单的单行解决方案是为div添加行高,记住所有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代码

其它参考13


你可以简单地实现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>



尝试:


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


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

其它参考14


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


http://www.csszengarden.com/?cssfile=/213/213.css\u0026amp;page=0[55]


这个想法既可以在底部显示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上工作至关重要。此外,这应该是第一个标签,它上面不应出现任何内容。

其它参考15


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


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




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

其它参考16


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



似乎工作:


#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。只需更改一个参数即可改变整个布局(不破坏它),这真是一种乐趣。[56]

其它参考17


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[57]


不客气