Question

现在已经在这个布局上工作了一段时间，我走的每一条路都遇到了某种障碍（这里的v1：https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area）

我现在要做的是让.spread的大小适应浏览器窗口的宽度和高度，所以它永远不会超过用户目前在浏览器中看到的内容（.spread目前有固定宽度/ height，用于演示目的）。理想的是能够即时调整大小并立即适应（即没有媒体查询）。

它在我链接到上面的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; 
}

P.S。标题非常糟糕，不知道我在寻找什么，但如果你能想到更好的东西，请转到更有用的东西。

Answer 1

完全解决方案的四分之三

这还不是一个完整的解决方案，因为它无法容纳超窄宽度的窗口大小（就像你的旧版本一样）。但是，这是向你寻求的目标迈出的一大步。

Here is the example.

已经改变的关键事项：

<强>加

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

已移除

overflow: hidden

div.centerimage。

width: 50%

.left

.right。

Answer 2

也许你可以固定你的.spread divisor

.spread {
  bottom: 11px;
  left: 11px;
  right: 11px;
  top: 11px;
  position: absolute;
  /* ... */
}

这样，它将调整视口区域的大小。

这里有jsFiddle来演示。

继续

Answer 3

我知道你可能正在寻找一个单独的CSS / HTML解决方案，但实际上你可能最好使用一些Javascript。使用CSS＆amp; amp;无法保持干净和精确。 HTML。但是如果你在页面加载和窗口调整大小上运行一点点JavaScript，那么你的div可以有实际的高度/宽度值并且干净地缩放。诀窍是让外部div通过JavaScript设置它的宽度/高度，然后它的所有子节点都使用％尺寸，以便它们适当增长。

以下是使用JQuery的基础知识：

<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
    var dims = [];
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                dims[0] = window.innerWidth;
                dims[1] = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft")!=-1) {
                dims[0] = document.body.offsetWidth;
                dims[1] = document.body.offsetHeight;
            }
        }
    return dims;
}
function ResizeDivs {
    var dims = get_widnow_dims();
    var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
    $('div.spread').css('width',div_width+'px');
}
$(function() {
    ResizeDivs();
    $(window).resize(function(){
         ResizeDivs();
    });
});
</script>

你可以轻松地清理这段代码，使其更加简洁，但我想我会用这种方式把它放在这里让你看到所有的部分。如果你想花费额外的时间，你甚至可以在窗口调整大小时添加更多JQuery来为div设置动画。

希望这有帮助。

Answer 4

您是否考虑过使用响应式框架来解决您的问题？您可以将宽度和高度设置为百分比，并具有最小宽度，最小高度。

如何缩放此布局？

4 个答案:

完全解决方案的四分之三