响应式全屏滑块中内容相对于行宽的绝对定位答案

【问题标题】：Absolute positioning of content in responsive full screen slider with respect to row width响应式全屏滑块中内容相对于行宽的绝对定位
【发布时间】：2016-04-28 23:47:08
【问题描述】：

我有一个带有背景图像的全宽滑块。滑块高度是根据图像响应的，因此它始终从屏幕的一侧到另一侧显示 100 % 的图像。

现在我正在尝试将内容（文本）定位在滑块内，使其位于内容网格内并且位于滑块的底部。

期望的结果：

问题是 .medium-6 .columns 的高度为 0 px，我无法将其内容定位到底部。

代码笔：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;}

【问题讨论】：

标签： slider zurb-foundation

【解决方案1】：

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

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

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

由于您的 Foundation 网格摘录不完整，我将原始 Foundation Framework CSS 和 JS 文件加载到 Pen。

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

【讨论】：