Html 带“的可变宽度侧边栏”；固定的；使用纯CSS定位

我想用纯CSS实现上面的图片。它必须具有以下功能：

• 图像容器

  将包含一个3x4纵横比图像，该图像应填充可用的视口高度。因此，

  图像容器

  将具有可变的宽度，具体取决于视口的高度

• 图像容器

  应在窗口滚动时固定到位

• 内容容器

  应可滚动

• 内容容器

  应填满

  图像容器

  右边缘与视口右边缘之间的所有可用空间

在过去，我可能会通过类似的方式（使用jquery）完成这项工作：

---

这是否可能只使用CSS？也许使用flex？

我相信我已经完成了您的尝试。退房

.image容器{
高度：100vh；
宽度：100vh-25%；
边框：2倍纯红；
显示：内联块；
保证金：0；
位置：固定；
}
.内容容器{
边框：2倍纯绿；
左边缘：100vh-25%；
显示：内联块；
宽度：100%；
高度：2000px；
}
我想完成如上图所示的任务，
使用纯CSS。它必须具有以下特性

css解决方案

使用

flex

html，
身体{
身高：100%；
溢出：隐藏；
}
html{
背景色：#000；
}
.身体{
保证金：0；
宽度：100%；
身高：100%；
背景色：#333；
颜色：#999；
}
.集装箱包装{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
调整项目：灵活启动；
身高：100%；
}
.图像容器{
背景尺寸：包含；
文本对齐：居中；
身高：100%；
}
.图像容器img{
身高：100%；
宽度：自动；
}
.内容容器{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容物内容器{
柔性生长：1；
溢出y：自动；
填充：20px 20px 40px 20px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。

您应该使用编辑器工具创建实时代码段，而不是链接到小提琴。在进行值计算时，您需要使用

calc（）

。另外，你的样品也不起作用，它的内容占了100%的宽度，这就像一个魔咒。

// style.css
.image-container {
   position:fixed;
   top: 0px;
   left:0px;
   bottom: 0px;
}

.image-container img {
   height: 100%;
}

// script.js
$(window).load(function() {
   var width = $('.image-container').width();
   $('.content-container').css({'margin-left': width});
});

.image-container{
  height:100vh;
  width:100vh - 25%;
  border:2px solid red;
  display:inline-block;
  margin:0;
  position:fixed;
}

.content-container{
 border:2px solid green;
 margin-left: 100vh - 25%;
 display:inline-block;
 width:100%;
 height:2000px;
}

<div class="image-container"></div>

<div class="content-container">
  <p>I would like to accomplish something like what's pictured above, 
using pure CSS. It must have the following features. </p>
</div>