关于html：带有Pixel和Percents的CSS布局

CSS Layout with Pixel And Percents

我有一个DIV，它包含两个嵌套的DIV，一个指定高度为65像素(头)，另一个指定高度为100%(内容)，它应该真实地占用空间的其余部分。当页面呈现时，右侧有一个滚动条，因为标题的高度指定为65像素。

混合百分比和像素有什么错？我一定错过了什么。如何修复此问题，以便内容部分使用剩余的页面空间，而我没有滚动条？

下面是我使用的ASP.NET标记和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

html
{
padding: 0px;
margin: 0px;
border: none;
width: 100%;
height: 100%;
font-family: verdana;
font-size: x-small;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
text-transform: none;
float: none;
}

body
{
border: none;
padding: 0px;
height: 100%;
width: 100%;
border: none;
margin: 0px;
}

form
{
border: none;
margin: 0px;
padding: 0px;
border: none;
height: 100%;
width: 100%;
}

span.appname
{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
font-style: normal;
color: #FFFFFF;
padding-right: 10px;
}

#header
{
background: #295984;
width: 100%;
height: 65px;
overflow: hidden;
}

#content
{
display: inline;
width: 100%;
height: 100%;
}

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/
#inner[id] {position: static;}

最简单的解决方案是将标题移动到内容中…然后它将占用内容块内的空间，而不是其上方。

如果这不是一个选择，有多种解决方案可以解决这个问题。以下是一些列表：

1)绝对定位收割台，Z索引为10。给content div一个65px的padding top，z-index为1。标题应覆盖内容分区的上填充区域。这将对非常严格的设计非常有用，这些设计没有任何随浏览器窗口宽度增长/收缩的动态宽度。

2)明确定位内容分区的顶部、左侧、底部和右侧。不指定宽度或高度。在这种情况下，顶部、左侧、底部和右侧是根据内容分区的包含块的内部填充边计算的。同样，这在刚性场地设计中也非常有效。应该在IE7/8中工作，但在IE6和更早版本中会有问题。

3)在内容部分使用负上边距og-65px。使用65px的上填充进行补偿。这在IE7和早期版本中可能会有问题，有时火狐会出现不稳定的负利润。有黑客可以解决这个问题，只需搜索网络。这应该适用于刚性或流体布局。

网络上有很多CSS设计资源。如果上面的选项不起作用，那么网络上的一些搜索应该会带来一些资源。

尝试先阅读这篇文章…这是关于CSS模板中的绝对位置冲突，并且不知何故它解决了您所讨论的问题。

(100%+n)>100%——不幸的是，在CSS中没有"剩余空间"这样的东西。

当你说100%的时候，这就意味着这一点，所以你最好的选择是JRISTA的选项2或3(imho abs定位是要避免的)。我也认为你可能想谷歌定位：固定。

现在你有两个总高度为100%+65px的div，所以它应该有一个滚动条。

如果不借助CSS黑客，你就不能真正做到你所尝试的仅仅是潜水。要做到这一点，最简单和最兼容浏览器的方法是将其包含在一个2行表中。将工作台高度设置为100%，第一个TD高度设置为65px，第二个TD高度未指定。有些人反对使用表格进行布局，但是如果你仍然不正确地使用CSS，那为什么不呢？

尽管如此，最好只使用一个分区在另一个分区之上的设计。由于屏幕大小的变化，动态调整浏览器内容不再有效。