响应式全高两栏网站，一栏内有图片

Question

我需要创建一个网站（两栏），其中一栏包含一些文本（垂直居中），另一栏包含图片（粘在底部）。

它们都需要响应（所以 position: fixed 不是图像的选项）。

我试图通过使用 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

告诉我你对此有何看法。 @机甲

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>

响应式全高两栏网站，一栏内有图片

Responsive full height two column website, image inside one column

html

css

twitter-bootstrap

responsive