Question

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

Structure 1

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

我很欣赏一个干净的跨浏览器解决方案，但万一不可能，CSS黑客会做。

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

Structure 2

Answer 1

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

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

来源： css width 100% minus 100px

Answer 2

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

Answer 3

虽然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％宽度”属性的元素。输入，表格和其他可能需要您将它们包装在容器div中并添加一点css来恢复此质量。如果你不幸遇到这种情况，请联系我，我会挖出css。

jsfiddle here：jsfiddle.net/RgdeQ

享受！

Answer 4

您可以使用Flexbox布局。您需要在flex: 1分别需要动态宽度或高度的元素上设置flex-direction: row and 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*/
}

<强>输出：

＆＃13;

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

＆＃13;

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

＆＃13;

动态高度：

<强> 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*/
}

<强>输出：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

执行此操作的常用方法是Guffa概述的嵌套元素。有必要添加额外的标记以获得你需要的钩子，这有点令人伤心，但在实践中，这里或那里的包装div不会伤害任何人。

如果你必须在没有额外元素的情况下这样做（例如，当你无法控制页面标记时），你可以使用box-sizing，它具有相当不错但不完整或简单的浏览器支持。可能比依赖脚本更有趣。

Answer 6

也许我是愚蠢的，但这不是明显的解决方案吗？

<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％的父级，将宽度设置为百分比值可以修复它。

Answer 7

如果你的包装div是100％并且你使用填充像素数量，那么如果填充＃需要是动态的，你可以轻松地使用jQuery来修改你的事件触发时的填充量。

Answer 8

我们可以非常轻松地使用flex-box实现这一目标。

如果我们有三个元素，如Header，MiddleContainer和Footer。我们想给页眉和页脚一些固定的高度。然后我们可以这样写：

对于React / RN（默认为'display'为flex，'flexDirection'为列），在web css中，我们必须指定包含这些的body容器或容器作为display：'flex'，flex-direction： '列'如下：

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

Answer 9

在某些情况下，您可以利用边距设置来有效指定“100％宽度减去N个像素”。请参阅this question的接受答案。

Answer 10

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

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。

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

10 个答案: