如何设置部分流体布局 (IMAGE)答案

【问题标题】：How to set up partially fluid layout (IMAGE)如何设置部分流体布局 (IMAGE)
【发布时间】：2014-08-08 20:40:45
【问题描述】：

我在为我的设计设置布局时遇到问题。

我想要两个 div，左右。我希望它们填充左侧和右侧，但保持在中心的相同位置。

左侧 div 将仅包含“始终可见”300 像素的内容（此页面不适用于移动设备）。但在右 DIV 中，我希望有基于 % 的内容，以使用更大的屏幕进行扩展。在较小的屏幕上，我不想在底部有 w 水平滚动条。

有人可以指出最佳解决方案吗？

非常感谢！

【问题讨论】：

标签： html css responsive-design fluid-layout

【解决方案1】：

FIDDLE

HTML 将是：

<div class="left">Test</div>
<div class="right">Test</div>

CSS 将是：

.left {width:300px; background:#FF0000; min-height:400px; float:left; }
.right { background:#00FF00; min-height:400px;  }

【讨论】：

但在更高的分辨率下，我希望左 div 移动到中心并展开，以填充左侧的额外空间。我想我将不得不使用一些 JavaScript。还是谢谢！

【解决方案2】：

我想我想出了一个解决方案。所以，HTML：

<div class="left"></div>
<div class="right"></div>

CSS：

.left { 

  width:300px;
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  background:blue;

}

.right {
  width:900px;
  background:red;
}

JavaScript：

$(window).ready(function() {
            var hWind = $(window).height();
            var wWindow = $(window).width();
            var toDistribute = wWindow - 1200;
            if (toDistribute > 0) {


                var addToBoth = toDistribute/2;
                var lW = $('.left').width();
                var rW = $('.right').width();
                $('.left').width(lW+addToBoth);
                $('.right').width(rW+addToBoth);
                $('.right').css('margin-left',lW+addToBoth);
            }
        });

【讨论】：