Question

这就是我尝试过的：http://jsfiddle.net/czra1qgu/我不知道jquery / js所以它可能是一个语法问题。

标记：

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

CSS：

.main {
    width:100%;
    height: 100px;
}

.left {
    width: 100px;
    height: 100%;
    background: #000;
    float: left;
}

.right {
    height: 100%;    
    background: #ccc;
    float: left;
}

jQuery的：

$(window).ready(function(){
    $('.right').width($('.main').width(-$('.left').width()));
});

$(window).resize(function(){
    $('.right').width($('.main').width(-$('.left').width()));
});

我也试过var foo =（＆＃39; .left＆＃39;）。width（）然后减去foo，但它也没有用。

Answer 1

几乎就在那里。尝试

$(document).ready(function(){
    $('.right').width($('.main').width()-$('.left').width());
});

width()是一个getter / setter。当您致电$('myElement').width()时，它会将宽度返回为无单位值。这就是为什么你需要$('.main').width() - $('.left').width()

另外，使用通知document代替window来分配ready处理程序

如何从.right中进一步减去像素？

var rightWidth = $('.right').width();
$('.right').css('width', (rightWidth - 10) + 'px');

Answer 2

您可以使用CSS calc()方法：

width: calc(100% - 100px);

＆＃13;

.main {
    width:100%;
    height: 100px;
}

.left {
    width: 100px;
    height: 100%;
    background: #000;
    float: left;
}

.right {
    height: 100%;   
    width: calc(100% - 100px);
    background: #ccc;
    float: left;
}

＆＃13;

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

＆＃13;

如何将这个div减去彼此相减的两个div的大小？

2 个答案: