Javascript 如何缩放此布局？

我已经在这个布局上工作了一段时间了，每走一条路都会遇到一些障碍（这里的v1:）

我现在要做的是使.spread的大小与浏览器窗口的宽度和高度相适应，这样它就永远不会超过用户当前在浏览器中看到的大小（.spread当前具有固定的宽度/高度，用于演示目的）。理想的情况是能够动态调整大小，并立即适应（即无媒体查询）

在我上面链接到的v1版本中，它的工作原理与它应该的一样，但是由于这个原因，我在淡入淡出效果方面遇到了问题。排列缺少实际的宽度/高度

这是新的演示：

更新：只要标记按说明工作，就可以对其进行更改

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

另外，标题真的很糟糕，我不知道我在找什么，但是如果你能想出更好的方法，请换成更具信息性的内容。

四分之三的完整解决方案 这还不是一个完整的解决方案，因为它不能适应超窄的窗口大小（就像旧版本一样）。然而，这是朝着你所追求的方向迈出的一大步

已经改变的关键事项：

已添加

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

已删除

• 溢出：从
  div.centerimage
  隐藏

• 宽度：从
  .left
  和
  .right
  开始的50%

---

我知道您可能正在寻找一个单独的CSS/HTML解决方案，但实际上您最好使用一些Javascript。仅仅使用CSS和HTML是无法做到清晰和精确的。 但是，如果在页面加载和窗口调整上运行一点点JavaScript，那么div就可以具有实际的高度/宽度值，并且可以清晰地缩放。 诀窍是让outside 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>

//函数获取当前窗口尺寸。
函数get_window_dims（）{
var dims=[]；
if（parseInt（navigator.appVersion）>3）{
if（navigator.appName==“Netscape”）{
dims[0]=窗宽；
dims[1]=窗内高度；
}
if（navigator.appName.indexOf（“Microsoft”）！=-1）{
dims[0]=document.body.offsetWidth；
dims[1]=document.body.offsetHeight；
}
}
返回暗淡；
}
函数ResizeDivs{
var dims=get_widnow_dims（）；
var div_width=Math.floor（dims[0]*0.93）；//计算div宽度为窗口宽度的93%
$（'div.spread'）.css（'width'，div_width+'px'）；
}
$（函数（）{
ResizeDivs（）；
$（窗口）。调整大小（函数（）{
ResizeDivs（）；
});
});

您可以很容易地将此代码整理得更简洁，但我想我会以这种方式将其放在这里，让您可以看到所有部分。 如果您想花费额外的时间，甚至可以添加更多JQuery来在窗口调整大小时设置div的动画

---

希望这有帮助。

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

也许你可以把你的.spread除数固定住

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

这样，它的大小将与视口区域的大小相同

这里有一个例子来演示

---

继续

媒体查询是建立响应性网站的关键工具。@DA也许我应该更改标签？我要寻找的更像它的行为方式：jsbin.com/otacuk/2Yes。也许你不是真的在问响应性设计，而是关于“扩展到浏览器宽度”的更具体的问题，也许你在这里需要的只是CSS中的%width。请在您的问题中发布您的HTML和CSS。@INT完成了，您还需要帮助吗？谢谢您的建议！我感谢你的努力。你认为它不可能缩放宽度吗？@INT:我还没有找到一个解决宽度缩放的方法。我的部分问题是我还没有完全理解到底发生了什么以及它是如何构建的。这是一个复杂的布局。在过去，我通过添加一个div包装容器并将其设置在那里，将宽度和高度属性应用于那些没有公开的DOM对象。@Syn123：这不是让它们公开的问题，而是OP在布局中做什么的复杂性问题。目前为缩放添加一个

宽度

会破坏该功能。请您尽可能用演示详细说明一下。是的，我尝试过。当然，知道它的父元素（主体）是相对于100%的宽度和高度来定位的，等等。我明白了，但是你的小提琴和我的相比太简单了，我看不出它对我有什么帮助，因为我无法在真实的案例中测试它（而且我没有适应你建议的更改并让它工作）。谢谢你试图解决这个问题。

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