需要div来填充100％的宽度 - 30像素（在同一容器中的其他div）

Question

http://jsfiddle.net/vAeLu/

HTML：

<div id="panel">
    <div id="panel-content">
        <div class="wrapper">
            <div id="bottom">
                <div class="update">Updating in: <div class="seconds">5</div> seconds</div>
                <div class="time"></div>
                <div class="date"></div>
            </div>
        </div>
    </div>
    <div id="right-bar"></div>
</div>

CSS：

html,body {
    height: 100%;
}

body {
    margin: 0;
    color: white;
    font-family: sans-serif;
    font-size: 1.3em;
}

#panel {
    width: 21.25%;
    height: 100%;
    background-color: #0794ea;
}

#panel-content {
    width: 100%;
    height: 100%;
    padding: 0 5.5%;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    height: 100%;
}

.update {
    width: 100%;
    background-color: #006699;
    text-align: center;
    height: 39px;
    padding-top: 17px;
    margin-bottom: 20px;
}

.seconds {
    display: inline;
}

.time {
    float: left;
}

.date {
    float: right;
}

#bottom {
    position: absolute;
    bottom: 24px;
    width: 100%;
    left: 0;
}

#right-bar {
    width: 30px;
    height: 100%;
    background-color: #006699;
    float: right;
}

我需要面板更新框来填充100％的宽度 - 我创建的边框/滚动div的30个像素。

如何使用我当前的代码执行此操作？

由于

Answer 1

如果不需要IE 7-8支持，CSS3属性calc就是为此而设计的。

width: calc(100% - 30px);

Answer 2

我认为您不能在CSS中使用％和px计算的跨浏览器解决方案。

这是一个jQuery解决方案：

$(function() {
    $('#panel-content .update').each({
        $(this).width( $(this).width()-30 );
    });
});

Answer 3

这个jsFiddle应该可以解决问题。

我将边框应用于.panel元素并应用了box-sizing: border-box;，因此边框的宽度为100％。

<强>结果