Question

我需要根据页面大小设置div的宽度。

我有三列。第一个和第三个是50px固定。我需要设置我的中间位置，以便占用所有空间。我还没有找到如何在CSS中做到这一点。所以我尝试使用Javascript和window.innerWidth并减去两个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％。

Javascript - 动态div宽度取决于页面大小

2 个答案: