从另一个 div 的边缘扩展背景图像以填充屏幕的剩余宽度

Question

我不确定如何称呼我遇到的问题，所以也许这就是为什么我也找不到解决方案的原因。

我收到了一个 PSD 文件以转换成一个网站，但我无法弄清楚如何让这个背景图像按照我们想要的方式运行。

下面是给我的布局的可视化示例，为此 post 进行了一些编辑。

左侧的白色柱子将是固定宽度，我们希望天际线图像从柱子的边缘扩展以适应浏览器的其余部分 window，扩展到内部 "wrapper" 绿线之间。

我试过将 divs 放在我的主包装器 div（绿线）中并绝对定位它们。我对它们进行了绝对定位，因为我还需要两个 div 来填充 window 的 100% 高度。这可行，但我无法获得右侧列（图像）的宽度来填充 window.

的其余部分

我将 div 的宽度设置为 100%，但它嵌套在我的包装器 div 中，因此它是包装器宽度的 100%，而不是屏幕的剩余宽度。

我迷路了...我在正确的轨道上，将它们嵌套在我的包装器中 div 并绝对定位它们吗？我应该改用 table 布局吗？我不知道从哪里开始寻找解决方案，我已经被困了 2 天了。

这是我正在尝试的一个非常基本的例子。正如您在CodePen link中看到的那样，右侧的蓝色div并没有扩展以完全填充剩余的window space。

CSS

body { background: #d8d8d8; }
html, body {
    height: 100%;
    margin: 0;
}
#wrapper {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
#left-col {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 330px;
    background: #fff;
}
#right-col {
    position: absolute;
    left: 330px;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #3A82A4;
}
#left-content {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 40px;
}
#right-content {
    position: absolute;
    width: 590px;
    left: 40px;
    top: 40px;
}

HTML

<div id="wrapper">
    <div id="left-col">
        <div id="left-content">
            Left column content
        </div>
    </div>

    <div id="right-col">
        <div id="right-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum hendrerit felis eget blandit. Duis lobortis leo nunc, eget venenatis mauris posuere ut. Pellentesque sed justo tincidunt, tristique arcu nec, euismod massa. Aenean quis ipsum nec lacus ullamcorper scelerisque. Nulla ultricies dui sit amet arcu ornare luctus. Ut cursus ut sem sed sagittis. Phasellus tincidunt sapien non odio lacinia vestibulum.
        </div>
    </div>
</div>

http://codepen.io/anon/pen/gpYQEw

Answer 1

我只是给了它 width: 150%; 或无响应的固定尺寸 width: 1500px

#right-col {
position: absolute;
left: 330px;
top: 0;
bottom: 0;
width: 150%;
background: #3A82A4;

Answer 2

如果您将包装纸改为流体容器

#wrapper {
min-width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}

然后从那里定位您的左右元素，将您的右列偏移左列的设置宽度和左侧位置。

#left-col {
position: relative;
margin-left: 330px;
width: 330px;
background: #fff;
float: left;
min-height: 100%;
}
#right-col {
position: relative;
margin-left: 660px;
max-width: 100%;
background: red;
min-height: 100%;
}

Answer 3

你也可以这样做：

[..]
#right-col {
    position: relative;
    padding-left: 330px;
    width: 100%;
    height: 100%;
    background: #3A82A4;
}
#left-content {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 40px;
    z-index: 999;
}
#right-content {
    width: 590px;
}

http://codepen.io/anon/pen/zGOyBQ

Answer 4

这可能不是您要查找的内容，但我认为它很接近：http://codepen.io/anon/pen/qdWLXO；

基本上 #wrapper 是页面左侧的四分之一，图像一直扩展到右侧。当 window 变得太小而 #wrapper 无法显示内容并且 #left-col 下面的媒体查询删除左边距并使 #wrapper 占据整个页面.

@media screen and (max-width: 1250px) {
  #wrapper{ 
    width: 100%;
    margin-left: 0;
  }
}

从另一个 div 的边缘扩展背景图像以填充屏幕的剩余宽度

Expanding background image to fill remaining width of screen from edge of another div

html

css

background

css-float

background-image