如何在不使用表或JavaScript的情况下实现以下结构?白色边界代表div的边缘，与问题无关。
中间区域的大小会有所变化，但它会有精确的像素值，整个结构应该根据这些值缩放。为了简化它，我需要一种方法来设置“100% - n像素”的宽度为上-中和下-中div。
我很欣赏一个干净的跨浏览器解决方案，但如果不可能，CSS黑客也可以。
这里有个奖励。另一种结构我一直在挣扎，最终使用表格或JavaScript。它略有不同，但引入了新的问题。我主要是在基于jquery的窗口系统中使用它，但我想保持脚本的布局，只控制一个元素的大小(中间的一个)。
当前回答
你可以使用Flexbox布局。你需要在元素上分别设置flex-direction: row和column的动态宽度和高度。
动态宽度:
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 i.e. flex-grow: 1 and flex-shrink: 1*/
}
输出:
.container { 显示:flex; 宽度:100%; 颜色:# fff; 字体类型:Roboto; ｝ .fixed-width { 背景:# 9 bcb3c; 宽度:200 px;/*固定宽度*/ text-align:中心; ｝ .flexible-width { 背景:# 88 bef5; flex: 1;/*拉伸占用剩余宽度*/ text-align:中心; ｝ < div class = "容器" > < div class = "固定宽度”> 1 < / div > < div class = " flexible-width”> 2 < / div > < div class = "固定宽度”> 3. < / div > < / div >
动态高度:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
输出:
.container { display: flex; flex-direction: column; height: 100vh; color: #fff; font-family: Roboto; } .fixed-height { background: #9BCB3C; height: 50px; /* Fixed height or flex-basis: 100px */ text-align: center; display: flex; flex-direction: column; justify-content: center; } .flexible-height { background: #88BEF5; flex: 1; /* Stretch to occupy remaining width */ text-align: center; display: flex; flex-direction: column; justify-content: center; } <div class="container"> <div class="fixed-height"> 1 </div> <div class="flexible-height"> 2 </div> <div class="fixed-height"> 3 </div> </div>
其他回答
如果你的包装div是100%，你使用填充像素量，那么如果填充#需要是动态的，你可以很容易地使用jQuery修改你的填充量当你的事件触发。
在某些情况下，你可以利用边距设置来有效地指定“100%宽度减去N像素”。请看这个问题的公认答案。
可以使用嵌套元素和填充来获得工具栏上的左右边。div元素的默认宽度是auto，这意味着它使用可用宽度。然后，您可以添加填充元素，它仍然保持在可用的宽度。
下面是一个示例，您可以使用它将图像作为左右圆角，以及在它们之间重复的中心图像。
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
你可以使用Flexbox布局。你需要在元素上分别设置flex-direction: row和column的动态宽度和高度。
动态宽度:
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 i.e. flex-grow: 1 and flex-shrink: 1*/
}
输出:
.container { 显示:flex; 宽度:100%; 颜色:# fff; 字体类型:Roboto; ｝ .fixed-width { 背景:# 9 bcb3c; 宽度:200 px;/*固定宽度*/ text-align:中心; ｝ .flexible-width { 背景:# 88 bef5; flex: 1;/*拉伸占用剩余宽度*/ text-align:中心; ｝ < div class = "容器" > < div class = "固定宽度”> 1 < / div > < div class = " flexible-width”> 2 < / div > < div class = "固定宽度”> 3. < / div > < / div >
动态高度:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
输出:
.container { display: flex; flex-direction: column; height: 100vh; color: #fff; font-family: Roboto; } .fixed-height { background: #9BCB3C; height: 50px; /* Fixed height or flex-basis: 100px */ text-align: center; display: flex; flex-direction: column; justify-content: center; } .flexible-height { background: #88BEF5; flex: 1; /* Stretch to occupy remaining width */ text-align: center; display: flex; flex-direction: column; justify-content: center; } <div class="container"> <div class="fixed-height"> 1 </div> <div class="flexible-height"> 2 </div> <div class="fixed-height"> 3 </div> </div>
