jquery - 如何使用 css 和 jquery 实现 100% -100px

Question

我在 css 和 jquery 中使用相同的代码:

width: 100% -100px;

所以，我使用这段代码:

$(document).ready(function(){
    $('.left').css('width', '100%').css('width', '-=100px');
});

但是当浏览器加载网站后调整大小时它不能正常工作。我想工作类似于此代码:

.left
{
    width: 80%; //100% -100px;
}
.right
{
    width: 20%; //100px;
}

Answer 1

更新: Demo using jQuery

选项 1:

使用 jQuery:

function resize_div(selector){
    var curr_width = selector.width(); // get the current width
    new_width = curr_width - 100;
    selector.css('width', new_width);
}

$(document).ready(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // then resize width on document ready
});
$(window).resize(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // resize width everytime the window is resized
});

HERE'S A DEMO

选项 2:

您可以使用 css calc()，例如:

/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px);

选项 3:

使用 padding and box-sizing

.some-div
{
   padding-right: 50px;
   padding-left: 50px;
   width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}