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

如何在不使用表格或JavaScript的情况下实现以下结构? 白色边框表示div的边缘,与问题无关。

结构1

中间区域的大小会有所不同,但是会有精确的像素值,整个结构应该根据这些值进行缩放。 为了简化它,我需要一种方法来设置“100%-n px”宽度的顶部中间和底部中间的div。

我会很感激一个干净的跨浏览器解决scheme,但万一这是不可能的,CSS黑客会做。

这是一个奖金。 另一个结构我一直在努力,最终使用表或JavaScript。 略有不同,但引入了新的问题。 我一直主要在基于jQuery的窗口系统中使用它,但我想保持布局不在脚本中,只控制一个元素(中间的)的大小。

结构2

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

这里是一个例子,你可以用来把图像作为左右圆angular,以及在它们之间重复的中心图像。

HTML:

 <div class="Header"> <div> <div>This is the dynamic center area</div> </div> </div> 

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; } 

新的方式,我只是偶然发现: css calc()

 .calculated-width { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); }​ 

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

虽然Guffa的答案在许多情况下都有效,但在某些情况下,您可能不希望左侧和/或右侧的填充作为中心div的父项。 在这些情况下,可以在中心使用块格式上下文,并左右浮动填充div。 这是代码

HTML:

 <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> 

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%”属性。 input,表格,可能还有其他的需要你把它们包装在一个容器div中,并添加一些CSS来恢复这个质量。 如果你不幸在这种情况下,联系我,我会挖起来的CSS。

jsfiddle在这里: jsfiddle.net/RgdeQ

请享用!

通常的做法就像Guffa所描述的嵌套元素一样。 有一点让人伤心,不得不添加额外的标记来获得你需要的钩子,但实际上在这里或那里的包装div不会伤害任何人。

如果你必须没有额外的元素(例如,当你没有控制页面标记),你可以使用框大小 ,它有相当不错的,但不完整或简单的浏览器支持。 虽然可能比依靠脚本更有趣。

如果你的包装div是100%,而你使用填充像素数量,那么如果填充#需要dynamic,你可以很容易地使用jQuery来修改你的填充量,当你的事件触发。

也许我是愚蠢的,但是不是在这里明显的解决scheme吗?

 <div class="parent"> <div class="fixed"> <div class="stretchToFit"> </div> .parent{ display: table; width 100%; } .fixed { display: table-cell; width: 150px; } .stretchToFit{ display: table-cell; vertical-align: top} 

另一种我已经在Chrome上发现的方法更简单,但是人就是黑客!

 .fixed{ float: left } .stretchToFit{ display: table-cell; width: 1%; } 

这一点应该像表格单元那样水平地填充剩下的行。 然而,你会得到一些奇怪的问题,超过它的父母的100%,将宽度设置为一个百分比值修复它虽然。

您可以使用Flexbox布局。 您需要在需要具有dynamic宽度或高度flex-direction: row and column的元素上分别设置flex: 1 flex-direction: row and column

dynamic宽度:

HTML

 <div class="container"> <div class="fixed-width"> 1 </div> <div class="flexible-width"> 2 </div> <div class="fixed-width"> 3 </div> </div> 

CSS

 .container { display: flex; } .fixed-width { width: 200px; /* Fixed width or flex-basis: 200px */ } .flexible-width { flex: 1; /* Stretch to occupy remaining width ie flex-grow: 1 and flex-shrink: 1*/ } 

输出:

 .container { display: flex; width: 100%; color: #fff; font-family: Roboto; } .fixed-width { background: #9BCB3C; width: 200px; /* Fixed width */ text-align: center; } .flexible-width { background: #88BEF5; flex: 1; /* Stretch to occupy remaining width */ text-align: center; } 
 <div class="container"> <div class="fixed-width"> 1 </div> <div class="flexible-width"> 2 </div> <div class="fixed-width"> 3 </div> </div> 

我们可以很容易地使用弹性盒来实现这一点。

如果我们有三个元素像Header,MiddleContainer和Footer。 而我们想要给Header和Footer一些固定的高度。 那么我们可以这样写:

对于React / RN(默认是'显示'为flex和'flexDirection'为列),在web css中,我们必须指定包含这些显示的主体容器或容器:'flex',flex-direction:'column'如下所示:

  container-containing-these-elements: { display: flex, flex-direction: column } header: { height: 40, }, middle-container: { flex: 1, // this will take the rest of the space available. }, footer: { height: 100, } 

在某些情况下,您可以利用边距设置来有效指定“100%宽度减N像素”。 看到这个问题被接受的答案。

我有一个类似的问题,我想在屏幕顶部的横幅有一个图像在左边,重复的图像在右边的屏幕边缘。 我最终解决了这个问题:

CSS:

 .banner_left { position: absolute; top: 0px; left: 0px; width: 131px; height: 150px; background-image: url("left_image.jpg"); background-repeat: no-repeat; } .banner_right { position: absolute; top: 0px; left: 131px; right: 0px; height: 150px; background-image: url("right_repeating_image.jpg"); background-repeat: repeat-x; background-position: top left; } 

关键是正确的标签。 我基本上指定我希望它从左边的131px重复右边的0px。