响应全高度两列网站，图像在一列内

Question

我需要创建一个网站（两列），其中一列包含一些文本（垂直居中），另一列包含图片（从下到上）。

它们都需要响应（所以位置：固定不是图像的选项）。

我试图通过使用Bootstrap和w3响应框架来实现这一目标。但是它们似乎都无法将响应图像放在始终粘在底部的列中。

有关如何在响应时实现此布局的任何提示（图片需要调整大小等）？

Answer 1

以下是如何使用flex实现它的快速示例。

/* Std */

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* Flex Classes */

.flex {
  display: flex;
}

.flex--row {
  flex-direction: row;
}

/* Column Classes */

.column {
  position: relative;
  min-height: 100vh;
}

.left-column {
  flex: 0.7;
  background: red;
}

.right-column {
  flex: 0.3;
  background: blue;
}

/* Picture */

#column-picture {
  width: 100%;
  height: inherit;
  position: absolute;
  bottom: 0;
}

<div class="flex flex--row">
  <div class="column left-column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia auctor tincidunt. Sed a turpis et eros iaculis convallis quis in nisl. Donec fringilla auctor eros ut ultrices. Donec laoreet dui urna, ut pharetra neque molestie et. Ut sagittis diam a lacus euismod dignissim. Sed vulputate dui erat, at hendrerit ante commodo et. Sed gravida ex et est bibendum pretium. Aliquam a convallis dui. Maecenas magna velit, ultrices eu massa sit amet, dictum accumsan tellus. Maecenas eget placerat magna. Nullam mollis lacus tempor lorem tempor tincidunt. Aliquam erat volutpat.
  </div>
  <div class="column right-column">
    <img id="column-picture" alt="Lion" src="https://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide.jpg"/>
  </div>
</div>

Answer 2

告诉我你对此的看法。 @Mech

https://codepen.io/rickydam/pen/zdrmWX

<强> HTML

<div class="left">
  <div class="innerleft">
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla. Phasellus vel quam a sem elementum volutpat vel eget neque. Nam efficitur maximus risus, ac eleifend augue tempor rutrum. Fusce vehicula non lorem vitae blandit. Donec in scelerisque sem, quis congue velit. 
  </p>
  </div>

</div><!--
--><div class="right">
  <img src="http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg">
</div>

<强> CSS

.left {
  width: 50%;
  height: 100vh;
  background-color: lightgray;
  display: inline-block;
  vertical-align: middle;
  margin: auto;
}

.innerleft {
  background-color: lightblue;
  height: 100vh;
  display: flex;
  align-items: center;
}

.left p {
  margin: 20px;
  padding: 10px;
  background-color: gray;
}

.right {
  width: 50%;
  height: 100vh;
  background-color: slategray;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.right img {
  position: absolute;
  bottom: 0;
  max-width: 100%;
}

Answer 3

Here's不使用flex的解决方案。它是完全响应，可以水平和垂直缩放。

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#column1 {
  position: relative;
  width: calc(50% - 4px);
  height: calc(100% - 4px);
  display: inline-block;
  border: 2px solid black;
}

#column1 span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
}

#column2 {
  position: relative;
  top: -50%;
  left: 50%;
  width: calc(50% - 2px);
  height: calc(50% - 4px);
  display: inline-block;
  border: 2px solid black;
  border-left: none;
}

<div id="container">
  <div id="column1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>
  </div>
  <footer id="column2"></footer>
</div>