Question

我不知道该怎么称呼我所遇到的问题，所以也许这也是我找不到解决方案的原因。

我被交给一个PSD文件转换成一个网站，我不能，为了我的生活，弄清楚如何让这个背景图像按照我们想要的方式行事。

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

screenshot

左侧的白色列将是固定宽度，我们希望天际线图像从列的边缘展开以适应浏览器窗口的其余部分，扩展到绿色线之间的内部“包装器”之外。 / p>

我尝试在我的主包装div（绿线）中放置div并绝对定位它们。我绝对定位它们，因为我还需要两个div来填充窗口高度的100％。这有效，但我无法获得右手栏（图像）的宽度来填充窗口的其余部分。

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

我迷失在这里......我是在正确的轨道上，将它们嵌入我的包装div并绝对定位它们？我应该转到基于表格的布局吗？我不知道从哪里开始寻找解决方案而且我已经被困了2天了。

这是我正在尝试的一个非常基本的例子。正如您在CodePen链接中看到的那样，右侧的蓝色div不会延伸以完全填充剩余的窗口空间。

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

这可能不是你想要的，但我认为它很接近：http://codepen.io/anon/pen/qdWLXO;

基本上#wrapper距离页面左侧四分之一，图像一直向右侧扩展。当窗口太小而#wrapper无法显示内容时，#left-col以下媒体查询会删除左侧边距，并使#wrapper占用整个页面。

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

Answer 2

我刚刚给它width: 150%;或无法响应的固定大小width: 1500px

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

Answer 3

如果您将包装物改为液体容器

#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 4

你也可以这样做：

[..]
#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

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

4 个答案: