Question

我试图创建一个响应式CSS页脚栏，当您将其悬停时，某些内容会从底部进入视口。里面的内容是一些文本（定义容器的高度）和图像。

除了不适合容器的图像外，所有图像都具有响应性并且运行良好。

我知道它需要父元素的高度值才能工作，但如果它是响应的，该怎么做呢？

这是我到目前为止所得到的：

＆＃13;

#footer {
  z-index: 9999;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#footer:hover{
  display: block;
  transform: translateY(0);
}

#conainer{
height: 100%;
}

＆＃13;

<div id="footer">
  
  <div style="background: #333; height: 50px; color:#fff; font-size: 14px; text-align: center;">
Hover me! (and if you can, resize the frame)
</div>

  <div id="container">
<div style="height: 100%; min-height: 100px; width: 50%; float: left; background-image: url('http://storage.pagani.com/view/1024/2009-12-31-Pagani-03-191m8LL2FRRc-7.jpg'); background-size: cover; background-position: center bottom;"> </div>
<div style="width: calc(50% - 60px); float: left; background: #444; padding: 30px; color:#fff; font-size: 14px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div>
    
</div>

＆＃13;

Answer 1

首先修复标记错误，上一个<div>的第二个应该是</div>，然后更好地将所有内联样式移动到CSS中。

我使用CSS表+表格单元格，这样两个div总是得到相同的高度。

https://jsfiddle.net/huy4zbra/2/

#footer {
  z-index: 9999;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#footer:hover {
  display: block;
  transform: translateY(0);
}

.bar {
  background: #333;
  height: 50px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

#conainer {
  display: table;
  width: 100%;
}

.image {
  width: 50%;
  background-image: url('http://storage.pagani.com/view/1024/2009-12-31-Pagani-03-191m8LL2FRRc-7.jpg');
  background-size: cover;
  background-position: center bottom;
  display: table-cell;
}

.text {
  width: 50%;
  background: #444;
  padding: 30px;
  color: #fff;
  font-size: 14px;
  display: table-cell;
}

<div id="footer">
  <div class="bar">
    Hover me! (and if you can, resize the frame)
  </div>
  <div id="container">
    <div class="image"> </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Answer 2

您可以使用伪装来保持容器的响应能力，因为您正在设置背景图像：

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>

#footer {
  z-index: 9999;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#footer:hover{
  display: block;
  transform: translateY(0);
}

#conainer{
height: 100%;
}

.awesome:before {
   display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}

响应式图像不适合容器

2 个答案: