关于html：Div宽度100％减去固定的像素数量

Div width 100% minus fixed amount of pixels

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

Structure 1

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

我希望有一个干净的跨浏览器解决方案，但如果不可能的话，CSS黑客就可以了。

这是奖金。另一个我一直在努力使用的结构，最终使用的是表或JavaScript。虽然略有不同，但也引入了新的问题。我主要是在基于jQuery的窗口系统中使用它，但是我想避免脚本中的布局，只控制一个元素(中间的元素)的大小。

Structure 2

相关讨论

虽然Guffa的答案在许多情况下都有效，但在某些情况下，您可能不希望左边和/或右边的填充部分成为中心分区的父级。在这些情况下，您可以在中心使用块格式上下文，并左右浮动填充分区。下面是代码

HTML：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.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相比，这个元素层次结构更自然，更好地表示页面上的内容。因此，边框、填充和边距可以正常应用于所有元素(即：这种"自然性"超出了样式，并具有派生效果)。

请注意，这只适用于共享其"默认情况下填充100%宽度"属性的div和其他元素。输入、表以及其他可能的输入将要求您将它们包装在一个container div中，并添加更多的CSS来恢复这种质量。如果你不走运，遇到这种情况，请联系我，我会找到CSS。

jspiddle这里：jspiddle.net/rgdeq

享受！

您可以使用flexbox布局。您需要分别在需要为flex-direction: row and column提供动态宽度或高度的元素上设置flex: 1。

动态宽度：

HTML

1
2
3
4
5
6
7

1

2

3

CSS

1
2
3
4
5
6
7
8
9

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

输出：

1
2
3
4
5
6
7

1

2

3

动态高度：

HTML

1
2
3
4
5
6
7

1

2

3

CSS

1
2
3
4
5
6
7
8
9

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

输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

1
2
3
4
5
6
7

1

2

3

也许我是在装傻，但表不是很明显的解决方法吗？

1
2
3

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

我在Chrome中发现的另一种方法更简单，但老兄，这是一个黑客！

1
2
3
4
5
6
7

.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}

仅此一项就应该水平填充行的其余部分，就像表格单元格那样。但是，当它超过其父级的100%时，您会遇到一些奇怪的问题，将宽度设置为百分比值可以修复它。

通常的方法是像guffa所概述的那样，嵌套元素。需要添加额外的标记来获得您需要的钩子，这有点令人难过，但是在实践中，这里有一个包装分区，否则不会伤害任何人。

如果您必须在没有额外元素的情况下进行此操作(例如，当您无法控制页面标记时)，则可以使用框大小调整，它具有相当不错的但不完整或简单的浏览器支持。可能比依赖脚本更有趣。

我们可以很容易地使用flex box来实现这一点。

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

对于react/rn(默认值为"display"作为flex，"flex direction"作为column)，在web css中，我们必须将包含这些内容的主体容器或容器指定为display:"flex"，flexdirection:"column"，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

如果包装分区为100%，并且使用了像素量的填充，那么如果填充需要是动态的，则可以在事件触发时轻松使用jquery修改填充量。

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

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.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。

在某些情况下，您可以利用边距设置来有效地指定"100%宽度减去n个像素"。请参阅此问题的公认答案。