Div宽度100%减去固定的像素数量

来源:css宽度100%减去100px

您可以使用嵌套元素和填充来获取工具栏上的左右边缘.div元素的默认宽度是auto,这意味着它使用可用的宽度.然后,您可以向元素添加填充,并且它仍然保持在可用宽度内.

下面是一个示例,您可以将图像用作左右圆角,以及在它们之间重复的中心图像.

HTML:

   

      
This is the dynamic center area
   

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

虽然Guffa的答案适用于许多情况,但在某些情况下,您可能不希望左侧和/或右侧填充片段成为中心div的父级.在这些情况下,您可以在中心使用块格式化上下文并左右浮动填充div.这是代码

HTML:

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

我觉得与嵌套的嵌套div相比,这个元素层次结构更自然,更好地代表了页面上的内容.因此,边框,填充和边距可以正常应用于所有元素(即:这种"自然性"超出了风格并具有分支).

请注意,这仅适用于div和其他共享"默认情况下填充100%宽度"属性的元素.输入,表格和其他可能需要您将它们包装在容器div中并添加一点css来恢复此质量.如果你不幸遇到这种情况,请联系我,我会挖出css.

jsfiddle:jsfiddle.net/RgdeQ

请享用!