我正在尝试使用基于div的布局制作两列的页面(请不要使用表格！)。问题是，我无法使左div增长到匹配右div的高度。我右边的div通常有很多内容。
这是我的模板的配对示例，以说明问题。
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
| <ul>
<li>
nav1
</li>
<li>
nav2
</li>
<li>
nav3
</li>
<li>
nav4
</li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
.... |
您最简单的答案是css(3)的下一版本，目前尚不支持浏览器。
目前，您只能使用javascript计算高度并将其设置在左侧。
如果导航的重要性如此之高，请沿顶部运行。
您还可以通过将边框移到容器和更大的内部区域上来做一些视觉技巧，并使其看起来具有相同的大小。
这使它看起来相同，但事实并非如此。
可以在CSS中完成！不要让别人告诉你。
最简单，最轻松的方法是使用Faux Columns方法。
但是，如果该解决方案不适用于您，您将需要阅读此技术。但请注意，这是一种CSS骇客，它会使您在半夜冒汗。
要点是您在底部分配了大量填充列，以及相同大小的负边距。然后，将列放在已设置overflow: hidden的容器中。或多或少的padding / margin值允许框继续扩展，直到到达包装器的末尾(由内容最多的列确定)为止，并且由于溢出而将padding产生的任何多余空间都切除了。我知道这没有什么意义。
1
2
3
4
5
6
7
8
9
10
11
12
| Content
Longer Content
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
} |
一定要阅读我链接的整篇文章，这里有很多警告和其他实现问题。这不是一个漂亮的技术，但是效果很好。
您可以在jQuery中非常简单地完成此操作，但我不确定应该将JS用于此类操作。最好的方法是使用纯CSS做到这一点。
看看人造柱甚至流体人造柱
在漂亮的IE6上工作)是position：相对于父容器。子容器(在您的情况下为导航列表)应放置在绝对位置，并被强制以'top：0;占据整个空间；底部：0;'
使用jQuery解决此问题；只需在您准备好的函数中调用此函数：
1
2
3
4
| function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height +"px");
} |
这是CSS不能做到的那些完全合理，简单的事情之一。正如Silviu所建议的那样，Faux Columns是一个hacky但可以解决问题的解决方法。如果有一天能说出
1
2
3
| div.foo {
height: $(div.blah.height);
} |
这可以通过使用背景颜色的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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Untitled Document
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<!--header and menu content goes here -->
Header Goes Here
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
<!--clears footer from content-->
<!--footer content goes here -->
<p>Footer Info Here</p>
</body>
</html> |
以与右侧内容div相同的高度增加左侧菜单div。
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Untitled Document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) +"px");
$("#content").css("height", (height) +"px");
});
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
i am a header
i am a menu
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
footer
</body>
</html> |
我用它来对齐ID为" center"和" right"的2列：
1
2
3
4
5
6
7
8
9
10
| var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
} |
希望有帮助。
还有一个基于Javascript的解决方案。如果您使用jQuery，则可以使用以下插件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight +"px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
}); |
想想看，我从来没有在列的底部加上边框。它可能只是溢出而被切断。您可能希望底部边框来自列内容中一个单独的元素。
无论如何，我知道这不是完美的魔术解决方案。您可能只需要使用它，或者解决它的缺点。
@hoyhoy
如果设计师可以使用html进行此工作，那么他可以进行此设计。如果他是一位真正的网页设计大师，他将意识到这是媒体的局限性，因为在杂志广告中无法播放视频。
如果他想通过赋予两列相等来模拟权重重要的是，不要更改边框，以使边框看起来具有相同的权重，并使边框的颜色与列的字体颜色形成对比。
但是要使物理元素具有相同的高度，此时只能使用表结构或设置高度。要模拟它们显示为相同大小，它们不必具有相同大小。
