使用CSS在HTML中设置div的高度

Setting a div's height in HTML with CSS

我正在尝试将表格列分为两列。我希望最右边的列停靠在页面的右边，并且此列应具有不同的背景色。右侧的内容几乎总是小于左侧的内容。我希望右侧的div始终足够高，以到达其下一行的分隔符。如何使背景色填充该空间？

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

.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}

.left {
font-size: 20pt;
}

.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}

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

Some really short content.

Some really really really really really really
really really really really big content

Some more short content.

Some really really really really really really
really really really really big content

编辑：我同意这个示例非常类似于表，并且实际表将是一个不错的选择。但是我的"真实"页面最终将变得不像表格一样，我只想首先掌握此任务！

另外，由于某种原因，当我在IE7中创建/编辑帖子时，代码可以正确显示在预览视图中，但是当我实际发布消息时，格式会被删除。 FWIW在Firefox 2中编辑我的帖子似乎有效。

另一个编辑：是的，我不接受GateKiller的回答。在我的简单页面上，它确实确实可以很好地工作，但在我实际的较重页面上却不能。我将研究大家都指出的一些链接。

啊...

The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.

实际上，在大多数设计情况下100％的高度将不起作用-这可能很短，但这不是一个好答案。 Google"任何列最长"的布局。最好的方法是将左右cols放在包装器div内，使左右cols浮动，然后使包装器浮动-这使它伸展到内部容器的高度-然后在外部包装器上设置背景图像。但是请注意浮动元素上的任何水平边距，以防出现IE"双边距浮动bug"。

试试看：

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

html, body,
#left, #right {
height: 100%
}

#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}

1
2
3
4
5
6
7
8
9
10

<html>
<body>

Content

Content

</body>
</html>

某些浏览器支持CSS表，因此您可以使用各种CSS display: table-*值来创建这种布局。雷切尔·安德鲁(Rachel Andrew)撰写的这篇文章(以及同名书籍)中提供了有关CSS表的更多信息：关于CSS的一切都是错误的

如果您需要在不支持CSS表的旧版浏览器中保持一致的布局，则需要做两件事：

使您的"表行"元素清除其内部浮动元素。

最简单的方法是设置overflow: hidden来照顾大多数浏览器，并设置zoom: 1在旧版本的IE中触发hasLayout属性。

还有很多其他清除浮点的方法，如果这种方法会引起不良的副作用，则应检查哪种'clearfix'方法最好，以及有关为其他方法进行布局的文章。

平衡两个"表格单元"元素的高度。

有两种方法可以解决此问题。您可以通过在"表格行"元素上设置背景图像(仿列技术)来创建高度相等的外观，也可以通过为每个列提供较大的填充和同样大的负边距来使列的高度匹配。

人造色谱柱是一种较简单的方法，当一根或两根色谱柱的宽度固定时，效果很好。另一种技术可以更好地处理可变宽度的列(基于百分比或em单位)，但是如果您直接链接到列中的内容(例如，如果某列包含并且您链接到#foo)，则可能会在某些浏览器中引起问题

这是一个使用填充/边距技术来平衡列高的示例。

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

html, body {
height: 100%;
}

.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}

.right-column {
width: 20%;
float: right;
}

.left-column {
width: 79%;
float: left;
}

1
2
3
4
5
6

Right column content
Left column content

Right column content
Left column content

Natalie Downe的这个Barcamp演示在弄清楚如何添加额外的列以及良好的间距和填充时也可能会很有用：等高列和其他技巧(这也是我第一次学习了用于平衡列高度的margin / padding技巧)

我放弃了严格的CSS并使用了一些jquery：

1
2
3
4
5
6
7
8
9

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);

下面是等高列的示例-等高列

您也可以查看"人造柱"的概念-人造柱

不要走桌子路线。如果不是表格数据，请不要这样对待。这对可访问性和灵活性不利。

无需编写自己的css，在您的HTML头部分中调用了一个名为" Bootstrap css"的库，我们可以实现许多样式，下面是一个示例：
如果要连续提供两列，则只需执行以下操作：

1
2
3
4
5

这里md代表中型设备，对于较小的设备，您可以使用col-sm-6；对于超小型设备，您可以使用col-xs-6

我的网站上遇到了同样的问题(无耻的插件)。

我的导航栏为" float：right"，页面的主体背景图片大约为250px，右对齐，" repeat-y"。然后，我在其中添加了"清晰：两者皆有"的内容。这是W3Schools和CSS clear属性。

我将透明字体放在分类div的"页面"底部。我的页面来源看起来像这样。

1
2
3
4
5
6
7
8
9
10
11

body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)

希望对您有所帮助：)

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

.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}

.left {
font-size: 20pt;
}

.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}

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

这应该对您有用：将html和body元素的CSS高度设置为100％。然后可以在div中根据需要调整高度。

1
2
3
4
5
6
7
8
9
10

html {
height: 100%;
}

body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}

只需使用css属性width即可。

这是一个例子：

1
2
3
4
5
6
7

我可以想到2个选择

使用javascript调整页面加载时较小列的大小。

通过为容器上的列设置background-color而不是()与repeat-y来伪造相等的高度

2列布局很难在CSS中工作(至少在CSS3实用之前)。

向左和向右浮动会起作用，但不允许您扩展背景。为了使背景保持坚实，您必须实施一种称为"仿列"的技术，这基本上意味着您的列本身将没有背景图像。您的2列将包含在父标记内。此父标记将获得包含所需2种列颜色的背景图像。仅根据需要设置此背景的大小(如果是纯色，则仅将其设置为1像素高)，并使其重复-y。 AListApart很好地介绍了使其工作所需的内容。

http://www.alistapart.com/articles/fauxcolumns/

这个问题的简短答案是，您必须将body和html标记的高度设置为100％，然后在要使页面高度为100％的每个div元素上将高度设置为100％。

只是在这里尝试提供帮助，使代码更易读。
请记住，您可以通过单击顶部带有" 101010"的按钮来插入代码段。只需输入您的代码，然后突出显示它，然后单击按钮。

这是一个例子：

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

<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}

.left {
font-size: 20pt;
}

.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>