1つの列にテキストが含まれていて、他の列に画像が含まれている（2つの列）ウェブサイトを作成する必要があります。レスポンシブフルハイト2列ウェブサイト、1列内の画像
どちらも応答性が必要です（position：fixedは画像のオプションではありません）。
私はブートストラップとw3対応フレームワークを使用してこれを達成しようとしました。しかし、彼らは常に底についているコラムの中に反応的なイメージを置くことができないようです。
私はこのレイアウトを達成するためのヒント（写真のサイズを変更するなど）
Here'sフレックスを使用しないソリューション。 は完全に反応しますであり、水平方向と垂直方向の両方にスケーリングすることができます。
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>は、ここでは、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>あなたはこのについて考えるものを教えてください。 @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%;
}