問題描述
Div 寬度 100% 減去固定數量的像素 (Div width 100% minus fixed amount of pixels)
如何在不使用表格或 JavaScript 的情況下實現以下結構？白色邊框代表 div 的邊緣，與問題無關。
中間區域的大小會有所不同，但它會有精確的像素值，整個結構應該根據這些值進行縮放。為了簡化它，我需要一種將“100% ‑ n px”寬度設置為中上和中下 div 的方法。
我希望有一個乾淨的跨瀏覽器解決方案，但是萬一這不可能，CSS hacks 會做。
這是一個獎勵。我一直在努力解決的另一種結構，最終使用了表格或 JavaScript。略有不同，但引入了新的問題。我一直主要在基於 jQuery 的窗口系統中使用它，但我想將佈局排除在腳本之外，只控制一個元素（中間元素）的大小。
參考解法
方法 1:
New way I've just stumbled upon: css calc():
.calculated‑width {
width: ‑webkit‑calc(100% ‑ 100px);
width: ‑moz‑calc(100% ‑ 100px);
width: calc(100% ‑ 100px);
}
Source: css width 100% minus 100px
方法 2:
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The 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;
}
方法 3:
While Guffa's answer works in many situations, in some cases you may not want the left and/or right pieces of padding to be the parent of the center div. In these cases, you can use a block formatting context on the center and float the padding divs left and right. Here's the code
The HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
The 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;
}
I feel that this element hierarchy is more natural when compared to nested nested divs, and better represents what's on the page. Because of this, borders, padding, and margin can be applied normally to all elements (ie: this 'naturality' goes beyond style and has ramifications).
Note that this only works on divs and other elements that share its 'fill 100% of the width by default' property. Inputs, tables, and possibly others will require you to wrap them in a container div and add a little more css to restore this quality. If you're unlucky enough to be in that situation, contact me and I'll dig up the css.
jsfiddle here: jsfiddle.net/RgdeQ
Enjoy!
方法 4:
You can make use of Flexbox layout. You need to set flex: 1 on the element that needs to have dynamic width or height for flex‑direction: row and column respectively.
Dynamic width:
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*/
}
Output:
.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>Dynamic height:
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*/
}
Output:
.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>方法 5:
The usual way to do it is as outlined by Guffa, nested elements. It's a bit sad having to add extra markup to get the hooks you need for this, but in practice a wrapper div here or there isn't going to hurt anyone.
If you must do it without extra elements (eg. when you don't have control of the page markup), you can use box‑sizing, which has pretty decent but not complete or simple browser support. Likely more fun than having to rely on scripting though.
(by Removed_account、rom_j、Guffa、Unislash、m4n0、bobince)