绝对定位内容在响应全屏幕滑块相对于行宽度

Question

我有一个全宽滑块与背景图像。滑块高度根据图像进行响应，因此它始终在屏幕左右两侧显示100％的图像。

现在我试图将内容（文本）放置在滑块内，以便它位于内容网格内，并且位于滑块的底部。

期望的结果：

的问题是.medium-6 .columns有0像素的高度，我不能够将其内容定位到了谷底。

CodePen：http://codepen.io/anon/pen/MaYOgQ

HTML：

<div class="slide"> 
    <div class="height-wrapper"> 
    <div class="row"> 
     <div class="columns small-6 small-offset-6"> 
     <div class="slider-content"> 
      <h2>Headline</h2> 
      <p>Description text</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.slide { 
    background-image: url('img/slider1.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    max-height: 627px; /* img full size height */ 
} 

.height-wrapper { 
    display: block; 
    padding-bottom: 35%; /* hack to always show full height of the image: (img height/img width) */ 
    width: 100%; 
    height: 0; 
} 

.columns { 
    position: relative; 
} 

.slider-content { 
    position: absolute; 
    left: 0; 
    bottom: 10%; 
} 

/* The rest is standard Foundation grid code */ 

.row { 
    margin: 0px auto; 
    max-width: 62.5em; 
    width: 100%; 
} 
.columns { 
    padding-left: 0.9375em; 
    padding-right: 0.9375em; 
    float: left; 
} 
.small-6 {width: 50%;} 
.small-offset-6 {margin-left: 50% !important;} 

Answer 1

您提到要滑块中的元素进行定位。我想这是一个JavaScript滑块，所以你不会介意在JavaScript中完成的定位。

该脚本根据原始图像大小和用户的窗口宽度计算应该是什么样的幻灯片高度。然后它将计算出的高度设置为.height-wrapper元素。

更新CodePen：http://codepen.io/anon/pen/VaEbOK

我装在原有基础框架CSS和JS文件，以笔为你的基础网格摘录是不完整的。

的JavaScript：

// -- Set slider content HEIGHT -- 
$(window).on('resize', function() { 
    var width = 1900; // Image width 
    var height = 627; // Image height 
    var slide_height = $(window).width()/(width/height); 
    $(".height-wrapper").height(slide_height); 
}).trigger('resize'); 

HTML：

<div class="slide"> 
    <div class="row"> 
    <div class="height-wrapper columns small-6 small-offset-6"> 
     <div class="slider-content"> 
     <h2>Headline</h2> 
     <p>Description text</p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.slide { 
    background-image: url('http://placehold.it/1900x627'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    max-height: 627px; /* img full size height */ 
} 

.height-wrapper { 
    padding: 0; /* remove Foundation .columns padding */ 
} 

.columns { 
    position: relative; 
    border: 1px solid blue; 
} 

.slider-content { 
    border: 1px solid red; 
    position: absolute; 
    left: 0; 
    bottom: 10%; 
} 

// + Foundation Framework