如何設置部分流暢的布局（IMAGE）

Question

我在為設計設置布局時遇到問題。

我想有兩個div，左和右。 我希望它們填充左側和右側，但保持在中心位置不變。

左div僅在“始終可見”的300px中顯示內容（此頁面不適用於移動設備）。 但是在正確的DIV中，我希望基於％的內容可以在更大的屏幕上擴展。 在較小的屏幕上，我不想在底部有水平滾動條。

有人可以指出我的最佳解決方案嗎？

非常感謝！

Answer 1

小提琴

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

Answer 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);
            }
        });