Question

我试图通过使用jquery绕过css calc问题（因为calc不能在Explorer上运行）但是当我设置宽度减去像素时，列不再是弹性的，并且所有内容都重叠在jsfiddle上（当我从textedit测试它时很好）请注意我需要将列左和中间作为固定定位，以便只有右列向下滚动时内容溢出。

有什么想法吗？

非常感谢！

http://jsfiddle.net/Alga/PHv6S/

CSS：

html, body { width:100%; margin:0; padding:0; font-size:87.5%; }

.middle {
    position:fixed;
    margin-top:20;
    margin-left:170;
    background:yellow;
    margin-bottom:20px;
    margin-right:40px;
}

.left {
    position:fixed;
    top:20px;
    left:20px;
    background:blue;
    width:130px;
}

.right {
    float:right;
    background:blue;
    margin: 20px 20px 20px 0;
}

HTML：

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

JavaScript的：

$(document).ready(function () { /* standard jQuery document ready */
    $('.left').css('height', '100%').css('height', '-=40px');
    $('.middle').css('width', '40%').css('width', '-=20px');
    $('.middle').css('height', '100%').css('height', '-=40px');
    $('.right').css('width', '60%').css('width', '-=190px');
    $('.right').css('height', '100%').css('height', '-=40px');
});

Answer 1

试试这个：

<强> http://jsfiddle.net/PHv6S/3/

$('.middle').css('width', '100%').css('width', '-=260px');

$(window).on('resize', function(){
    $('.middle').css('width', '100%').css('width', '-=260px');
});

Jquery calc百分比宽度减去不返回弹性列的像素

1 个答案: