时间戳

首页 > 解决方案 > Fixed image next to scrolling text column

html - Fixed image next to scrolling text column

问题描述

I'm trying to achieve the following with two adjacent HTML boxes:

  1. The text in the right box should be 300 px wide and always stick to the right.
  2. The left box should fill out the rest of the browser width (ie. support window resizing).
  3. The image should be centred horizontally in the left box.
  4. The image should scale automatically to fill the entire browser height.
  5. The image position should be fixed, ie. not scroll when scrolling down the page.

However, with the current version I have to manually specify height/width for the image box (augh!), and the text jumps around when I change the browser width. I'm just not good at this.

What is the simplest, most straight forward way to achieve the desired result?

<style>
  body {
    margin: 0;
  }
  .left {
    float: left;
    width: 700px; /* BAD */
    height: 700px; /* BAD */
    background-image: url("image.jpg");
    background-attachment: fixed;
    background-position: center top;
  }
  .right {
    float: right;
    width: 300px;
    padding: 0 8px 0 8px;
  }
</style>

<div class="wrapper">
<div class="left"></div>
<div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>

标签： htmlcss

解决方案

要固定左侧的图像，您需要将容器固定到窗口，因此添加位置：固定；。然后只需使用所有边的坐标使其填充左侧，但在右侧留下 300 像素 - 左侧：0，顶部：0，底部：0，右侧：300 像素。对于要填充容器的图像，请添加背景大小。您可以使用任一封面来始终填充容器的高度和宽度，或者仅使用“自动 100%”来始终使其具有容器的 100% 高度。我将 box-sizing:border-box 添加到您的右侧元素，这样它就不会乘以 300px 宽度和填充，从而使总数超过 300px 并与左侧发生碰撞。

.left {
  position: fixed;
  right: 300px;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url("//placehold.it/1000x1000");
  background-position: center;
  background-size: cover;
}
.right {
  float: right;
  width: 300px;
  padding: 0 8px 0 8px;
  box-sizing:border-box;
}

我为示例创建了一个小提琴：https ://jsfiddle.net/7v18eyL2/8/

推荐阅读