阻止CSS定位文本到底部

Question

我有一个基本的块网格 - 在一个设计上我热衷于将文本放在底部。我遇到的问题是要么在这种块上设置一个类，它将使用高度的整个宽度，如100％ - 然后将绝对置于文本底部。

//目前的样子

//我想确保它看起来像

标记看起来像这样

<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 614px; top: 300px;">

    <div class="element-wrapper">
        <div class="contents-wrapper">
            <div class="title">We are always here to help</div>
            <div class="contents">
                <div>
                    <p class="white-text absolute-bottom">When to seek support call 0202 000 000</p>
                </div>
            </div>
        </div>
        <div class="contents-background">
            <img class="small" src="http://www.dustydavis.com/wp-content/uploads/2017/05/Home-Buying-1.jpg"></div>
        </div>
    </div>

</div>

SCSS

.elements {

    .element-container{
        width: 200px;

        .element-wrapper{
            background: #ffffff;
            border: 1px solid black;
            height: 280px;

            margin:10px;

            .contents-wrapper{
                position: relative;
                z-index: 1;

                .title{
                    padding:10px;
                    background: #676766;
                    color: #ffffff;
                }
                .contents{
                    padding:10px;
                }
            }

            .contents-background{
              margin:10px;
              position: absolute;
              left: 1px;
              bottom: 1px;
              right: 1px;
              top: 1px;
              overflow: hidden;
              z-index: 0;

              img{


                &

                &.small{
                    width: auto;
                    height: 100%;                   
                }

              }
            }

        }

    }
}

我有一个基础jsfiddle

http://jsfiddle.net/0ht35rpb/111/

.demowrap{
	width: 600px;
	height: 600px;
    position: relative;
	border:1px solid red;
}
.elements {

}


.element-container{
width: 280px;/*demo width*/


}

.element-wrapper{
background: #ffffff;
border: 1px solid black;
height: 280px;

margin:10px;

}

.contents-wrapper{
	position: relative;
	z-index: 1;
}

.contents-wrapper .title{
	padding:10px;
	background: #676766;
	color: #ffffff;
}


 .contents-wrapper .contents{
	padding:10px;
}

.contents-background{
  margin:10px;
  position: absolute;
  left: 1px;
  bottom: 1px;
  right: 1px;
  top: 1px;
  overflow: hidden;
  z-index: 0;
}

.contents-background img.large{
	width: 100%;
	height: auto;		      		
}

.contents-background img.small{
	width: auto;
	height: 100%;		      		
}

 

<div class="demowrap">

<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 0px; top: 0px;">

<div class="element-wrapper">
	<div class="contents-wrapper">
		<div class="title">We are always here to help</div>
		<div class="contents">
			<div>
				<p class="white-text absolute-bottom">When to seek support call 0202 000 000</p>
			</div>
		</div>
	</div>
	<div class="contents-background">
		<img class="small" src="http://www.dustydavis.com/wp-content/uploads/2017/05/Home-Buying-1.jpg"></div>
	</div>
</div>


<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 300px; top: 0px;">

<div class="element-wrapper">
	<div class="contents-wrapper">
		<div class="title">Unaffected sister block</div>
		<div class="contents">
			<div>
				<p>Another demo block that just stays unaffected</p>
			</div>
		</div>
	</div>
</div>

</div>



</div>

Answer 1

您是否尝试过定位.contents？如果.content-wrapper的高度为100％，则应该能够将.contents与底部对齐。

.contents-wrapper {
  height: 100%; // add
}
.contents {
  position: absolute; // add
  bottom: 0; // add
}

您还可能失去额外的div