絕對定位內容在響應全屏幕滑塊相對於行寬度

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