Javascript - 動態div寬度取決於頁面大小

Question

我需要根據頁面大小設置div的寬度。

我有三列。 第一個和第三個是50px固定。 我需要設置我的中間位置，以便占用所有空間。 我還沒有找到如何在CSS中做到這一點。 所以我嘗試使用帶有window.innerWidth Javascript並減去兩個50px。

這是我的CSS：

<div class="col1">
    ...
</div>
<div class="col2">
  <div class="col2-1">
    ...
  </div>
<div class="col2-2">
    ...
</div>
</div>

和相應的Javascript

<script type="text/javascript">
  setStoreInfoWidth = function () {
    $('div.col2-1').css('width', window.innerWidth-100 + 'px')
  };

  setStoreInfoWidth();

  $(window).resize(function () {
    setStoreInfoWidth();
   });
</script>

這是一個代碼工作的JsFiddle： http ： //jsfiddle.net/MrYUb/

但是，我無法在我的實際網站上運行它。

你知道為什么嗎？

Answer 1

您可以使用負邊距來創建3列布局：

http://jsfiddle.net/teynon/J2mx7/2/

<div class="container">
    <div class="leftCol">
        Left stuff
    </div>
    <div class="rightCol">
        Right Stuff
    </div>
    <div class="middleCol">
        Middle stuff
    </div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>

CSS：

.container {
    width: 100%;
    position: relative;
}

.leftCol {
    float: left;
    margin-right: -50px;
    width: 50px;
    left: 0px;
    min-height: 100px;
    background-color: #FF0000;
}

.rightCol {
    width: 50px;
    margin-left: -50px;
    right: 0px;
    min-height: 50px;
    background-color: #00FF00;
    float: right;
}

.middleCol {
    margin: 0px 55px 0px 55px;
    background-color: #0000FF;
    min-height: 50px;
}

Answer 2

為什么不使用百分比？ 如果你有2個div，那么每個div將達到50％。