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

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的情况下实现以下结构?白色的边框代表divs的边缘，与问题无关。

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就可以了。

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的窗口系统中使用了它，但是我希望将布局放在脚本之外，只控制一个元素(中间的元素)的大小。

10 个解决方案

#1

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.

您可以使用嵌套的元素和填充来获得工具栏上的左和右边缘。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;
}

#2

New way I've just stumbled upon: css calc():

我刚刚偶然发现的新方法:css calc():

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

Source: css width 100% minus 100px

源:css宽度100% - 100px

#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

虽然Guffa的答案在很多情况下都适用，但在某些情况下，您可能不希望左和/或右的填充块作为中心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.

注意，这只适用于div和其他共享其“默认填充100%宽度”属性的元素。输入、表，可能还有其他需要您将它们打包到容器div中，并添加一些css以恢复这种质量。如果你不幸遇到这种情况，请联系我，我会找到css。

jsfiddle here: jsfiddle.net/RgdeQ

jsfiddle:jsfiddle.net/RgdeQ

Enjoy!

享受吧!

#4

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- size，它有很好的但是不完整的或者简单的浏览器支持。不过，这可能比依赖脚本更有趣。

#5

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%时，您会遇到一些奇怪的问题，但是将宽度设置为百分比值会修复它。

#6

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在事件触发时修改填充量。

#7

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.

你可以使用Flexbox布局。您需要设置flex: 1在需要动态宽度或高度的元素上，分别是行和列。

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>

#8

We can achieve this using flex-box very easily.

我们可以很容易地使用浮动框实现这一点。

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:

对于response /RN(默认为'display' as flex' as flex和'flexDirection' as column)，在web css中，我们必须指定包含这些内容的body容器或容器，如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,
    }

#9

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像素”。请看这个问题的公认答案。

#10

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。