Html Div 宽度 100% 减去固定数量的像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/651317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div width 100% minus fixed amount of pixels
提问by Removed_account
How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question.
如何在不使用表格或 JavaScript 的情况下实现以下结构？白色边框代表 div 的边缘，与问题无关。
The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs.
中间区域的大小会有所不同，但它将具有精确的像素值，并且整个结构应根据这些值进行缩放。为了简化它，我需要一种将“100% - n px”宽度设置为顶部中间和底部中间 div 的方法。
I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do.
我很欣赏一个干净的跨浏览器解决方案，但如果不可能，CSS hacks 会做。
Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).
这是一个奖励。我一直在努力使用的另一种结构，最终使用了表格或 JavaScript。它略有不同，但引入了新问题。我一直主要在基于 jQuery 的窗口系统中使用它，但我希望将布局保留在脚本之外，并且只控制一个元素（中间元素）的大小。
采纳答案by Guffa
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a divelement 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.
您可以使用嵌套元素和填充来获得工具栏上的左右边缘。div元素的默认宽度是auto，这意味着它使用可用宽度。然后您可以向元素添加填充，它仍然保持在可用宽度内。
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:
HTML：
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
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;
}
回答by rom_j
New way I've just stumbled upon: css calc():
我刚刚偶然发现的新方法：csscalc()：
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}?
Source: css width 100% minus 100px
回答by Unislash
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
虽然 Guffa 的答案在许多情况下都有效，但在某些情况下，您可能不希望左和/或右填充部分成为中心 div 的父级。在这些情况下，您可以在中心使用块格式上下文并左右浮动填充 div。这是代码
The HTML:
HTML：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
The CSS:
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).
我觉得与嵌套嵌套 div 相比，这种元素层次结构更自然，并且更好地表示页面上的内容。因此，边框、内边距和边距可以正常应用于所有元素（即：这种“自然”超越了样式并产生了影响）。
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.
请注意，这仅适用于共享“默认填充 100% 宽度”属性的 div 和其他元素。输入、表格和可能的其他内容将要求您将它们包装在容器 div 中并添加更多的 css 以恢复这种质量。如果你不幸遇到这种情况，请联系我，我会挖掘 css。
jsfiddle here: jsfiddle.net/RgdeQ
jsfiddle 在这里：jsfiddle.net/RgdeQ
Enjoy!
享受！
回答by Manoj Kumar
You can make use of Flexboxlayout. You need to set flex: 1on the element that needs to have dynamic width or height for flex-direction: row and columnrespectively.
您可以使用Flexbox布局。您需要flex: 1在需要分别具有动态宽度或高度的元素上进行设置flex-direction: row and column。
Dynamic width:
动态宽度：
HTML
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
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
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
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>回答by Hyman Franzen
Maybe I'm being dumb, but isn't table the obvious solution here?
也许我很笨，但桌子不是这里显而易见的解决方案吗？
<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}
Another way that I've figured out in chrome is even simpler, but man is it a hack!
我在 chrome 中找到的另一种方法甚至更简单，但伙计，这是一个黑客！
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
This alone should fill the rest of the line horizontally, as table-cells do. However, you get some strange issues with it going over 100% of its parent, setting the width to a percent value fixes it though.
仅此一项就应该水平填充行的其余部分，就像表格单元格一样。但是，当它超过其父级的 100% 时，您会遇到一些奇怪的问题，尽管将宽度设置为百分比值可以修复它。
回答by bobince
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.
通常的方法是 Guffa 概述的嵌套元素。不得不添加额外的标记来获得你需要的钩子有点遗憾，但实际上这里或那里的包装器 div 不会伤害任何人。
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.
如果您必须在没有额外元素的情况下执行此操作（例如，当您无法控制页面标记时），您可以使用box-sizing，它具有相当不错但不完整或简单的浏览器支持。可能比不得不依赖脚本更有趣。
回答by jayiitb
We can achieve this using flex-box very easily.
我们可以很容易地使用 flex-box 来实现这一点。
If we have three elements like Header, MiddleContainer and Footer. And we want to give some fixed height to Header and Footer. then we can write like this:
如果我们有 Header、MiddleContainer 和 Footer 三个元素。我们想给页眉和页脚一些固定的高度。那么我们可以这样写：
For React/RN(defaults are 'display' as flex and 'flexDirection' as column), in web css we'll have to specify the body container or container containing these as display: 'flex', flex-direction: 'column' like below:
对于 React/RN（默认为 'display' 作为 flex 和 'flexDirection' 作为列），在 web css 中，我们必须将包含这些的主体容器或容器指定为 display: '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,
}
回答by Mike Carey
I had a similar issue where I wanted a banner across the top of the screen that had one image on the left and a repeating image on the right to the edge of the screen. I ended up resolving it like so:
我有一个类似的问题，我想要一个横跨屏幕顶部的横幅，左侧有一个图像，右侧有一个重复的图像到屏幕边缘。我最终像这样解决它：
CSS:
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;
}
The key was the right tag. I'm basically specifying that I want it to repeat from 131px in from the left to 0px from the right.
关键是正确的标签。我基本上是指定我希望它从左侧的 131px 到右侧的 0px 重复。
回答by dfasdljkhfaskldjhfasklhf
what if your wrapping div was 100% and you used padding for a pixel amount, then if the padding # needs to be dynamic, you can easily use jQuery to modify your padding amount when your events fire.
如果你的包装 div 是 100% 并且你使用了一个像素数量的填充，那么如果填充 # 需要是动态的，你可以很容易地使用 jQuery 在你的事件触发时修改你的填充量。
回答by chaos
In some contexts, you can leverage margin settings to effectively specify "100% width minus N pixels". See the accepted answer to this question.
在某些情况下，您可以利用边距设置来有效地指定“100% 宽度减去 N 像素”。请参阅此问题的已接受答案。
