ブロックのCSSテキストの配置をブロックします。

Question

ブロックの基本的なグリッドがあります。また、1つのデザインでは、テキストを下部に配置したいと思っています。私が抱えている問題は、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%;     
       } 

       } 
      } 

     } 

    } 
} 

私はあなたが.contentsを配置しようとしたことがあり、ベースjsfiddle

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

.demowrap{ 
 
\t width: 600px; 
 
\t height: 600px; 
 
    position: relative; 
 
\t 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{ 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 

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

 

 
.contents-wrapper .contents{ 
 
\t 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{ 
 
\t width: 100%; 
 
\t height: auto; \t \t  \t \t 
 
} 
 

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

 

<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"> 
 
\t <div class="contents-wrapper"> 
 
\t \t <div class="title">We are always here to help</div> 
 
\t \t <div class="contents"> 
 
\t \t \t <div> 
 
\t \t \t \t <p class="white-text absolute-bottom">When to seek support call 0202 000 000</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="contents-background"> 
 
\t \t <img class="small" src="http://www.dustydavis.com/wp-content/uploads/2017/05/Home-Buying-1.jpg"></div> 
 
\t </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"> 
 
\t <div class="contents-wrapper"> 
 
\t \t <div class="title">Unaffected sister block</div> 
 
\t \t <div class="contents"> 
 
\t \t \t <div> 
 
\t \t \t \t <p>Another demo block that just stays unaffected</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
</div> 
 

 

 

 
</div>

Answer 1

を持っていますか？ .content-wrapperが100％の高さの場合は、.contentsを下部に揃えることができます。

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

また、余分なdiv