1

在此处输入图像描述

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 个像素。

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

谢谢

4

3 回答 3

1

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

width: calc(100% - 30px);

于 2013-07-30T16:31:28.990 回答
1

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

这是一个jQuery解决方案：

$(function() {
    $('#panel-content .update').each({
        $(this).width( $(this).width()-30 );
    });
});
于 2013-07-30T16:33:17.230 回答
1

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

我将您的边框应用于.panel元素并应用box-sizing: border-box;，因此边框在 100% 宽度内。

结果

100% 带边框宽度

于 2013-07-30T16:34:24.900 回答