我已经在这个布局上工作了一段时间，但我采取的每一种方式都会遇到某种障碍(这里的 v1:https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area)

我现在要做的是让 .spread 的大小适应浏览器窗口的宽度和高度，因此它永远不会超过用户当前在浏览器中可以看到的大小(.spread 目前具有固定宽度/高度，用于演示目的)。理想的情况是能够动态调整大小并立即适应(即没有媒体查询)。

在我上面链接的 v1 版本中它应该可以正常工作，但是由于 .spread 缺少实际的宽度/高度，我在淡入淡出效果方面遇到了问题。

这是新的演示:
http://jsbin.com/uciguf/1

更新:标记可以更改，只要它按描述工作即可。

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage.org/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src="http://s7.postimage.org/5l2tfk4cr/image.jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src="http://s7.postimage.org/fjns21dsb/image.jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

附言标题真的很糟糕，不知道我在找什么，但如果你能想到更好的东西，请换成更翔实的东西。

最佳答案

完整解决方案的四分之三

这还不是一个完整的解决方案，因为它不能适应超窄宽度的窗口大小(就像您的旧版本那样)。然而，这是朝着您寻求的目标迈出的良好一步。

Here is the example.

已更改的关键内容:

已添加

.spread { height: 93%; } /* You had originally wanted a height difference */

已移除

• 溢出:从 div.centerimage 中隐藏。
• 宽度:50% 来自 .left 和 .right。

关于javascript - 如何缩放此布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14608884/