Question

我已经尝试了很多让所有三列保持相同的高度，但没有任何工作。当我移动窗口时，我需要保持相同的高度并使所有三列看起来相同，即使列1中的上下文比其他两列更多，导致第一列扩展得比第2列和第3列更多。

CSS是第一个框，html是第二个框。我的实际网站有以下链接：http://web.toolwire.com/croganm-1003/UserInterfaceDesign/Module%204/Index.html

#header {
	font-family: "Stencil Std"; /*Easily readable font */
	height: 200px; /*Meant to grab readers attention but not outdo the columns*/
	width: 780px; /*Most of page but not all of it to create some white space*/
	float: none; /* Wanted it to be center aligned*/
	background-color: #396; /*Help show where the header is rather than the white backgroud which blended into the page*/
	margin-left: auto;  /*Center aligned*/
	margin-right: auto; /*Center aligned*/
	clear: none; /*Center aligned*/
	font-size: 80px;
	color: #000;
}
#navbar {
	background-color: #F90; /* different color to help seperae from other divs */
	float: none; /* Center aligned */
	height: 30px; /* Not to high to make it look like a navigational meu */
	width: 300px; /* Needs to be wide enough to easily fit all the text */
	clear: left; /* Want it under the header */
	text-align: center; /* Help center navigational options */
	margin-top: 30px; /* Some space between header and navbar */
	margin-bottom: 30px; /* Some space between columns and navbar */
	position: relative; /* Want it placed where it is relative to the html sheet */ 
	margin-left: auto; /* Center-aligned */
	margin-right: auto; /* Center aligned */
	padding: 10px; /* Space between both the text and the border of the box */
}
.wrap{
	display:table;
	width: 100%;
	height:auto;
}
#column1 {
	background-color: #69F; /* Light readable color */
	clear: left; /* Placed under navbar */
	float: left; /* Box is left aligned */
	height: auto;
	width: 30%; /* Adjustable width */
	padding-right: 1%;
	padding-left: 1%;
	padding-top: 10px;
	margin-bottom: 1%;
	display:table-column;
	min-height:390px;
}
ul {
	margin: 0 0 0 1em;
	padding: 0;
} 
#column2 {
	background-color: #6c9; /* Color contrasts with other two columns */
	float: left; /* Makes it stay in the same row as column 1 towards the left side */
	width: 30%; /* Adjustable width */
	margin-left: 2%; /* Adjustable margin to give space between column 1 and 2 */
	margin-bottom: 1%;
	padding-right: 1%;
	padding-left: 1%;
	padding-top: 10px;
	clear: right;
	position: static;
	display:table-column;
	min-height:390px;
	height: auto;
}
#column3 {
	background-color: #69f; /* Same color as first column */
	float: left; /* Meant to put it on same row as column 1 and 2 */
	height: auto; /* Long enough to contain vital information */
	width: 30%; /* Adjustable width */
	margin-left: 2%; /* Adjustable margin to give space betwen column 2 and 3 */
	margin-bottom: 1%;
	padding-right: 1%;
	padding-left: 1%;
	padding-top: 10px;
	clear: right;
	position: static;
	min-height:390px;
	display:table-column;
}
#footer {
	color: #000;
	background-color: #6f9;
	text-align: center;
	height: auto;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;
	bottom: 0px;
	font-size: 16px;
	font-weight: bolder;
	text-decoration: underline;
	margin-right: auto;
	margin-left: auto;
	clear: left;
	margin-bottom: 0px;
	margin-top: auto;
}

<!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" />
<title>Trainer Depot</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="images/Banner.png" alt="Header for Trainer Depot. Show's a train depot with blue and bold text saying &quot;Trainer Depot&quot;" width="780" height="200" />
 
</div>
<div id="navbar">
Home|Trainers|Testimonials|Contact
</div>

<div class="wrap">

<div id="column1">
<b><i>"Trainer Depot - what is that?"</i></b><br /><br />Well...<b>Trainer Depot is a service that lets you look up the trainer that you want, and call or email them directly.</b><br /><br /> How do you know what trainer you want? <br /><br />Easy: each trainer profile contains:
<ul>
<li>A Bio</li>
<li>Contact Information</li>
<li>A List of Their Services</li>
<li>Most Importantly, Read Reviews from Their Customers</li>
</ul>
</div>

<div id="column2">
<b><i>Who wants to work with an unknown trainer?</i></b><br /><br />
Not me...and probably not you. <br /><br />
So if you want the best—and <b>LOCAL</b>—trainers, you probably want to use this site.
</div>

<div id="column3">
<b><i>Are you a trainer?</i></b><br /><br />
If you are one, then register with us, and create your profile!<br /><br />
There's only a small fee (<i>for the trainers, not the customers, don't worry!</i>)
</div>

</div>

<div id="footer">
Thank you and call or email if you have any questions. Sincerely, the Web Master at Trainer Depot.
</div>
</body>
</html>

Answer 1

我建议设置标准高度，并在上下文大于div时使用overflow-y:auto

Answer 2

有几种方法可以实现您的目标：

在您的包装类上使用display:table，在列上使用display:table-cell。这基本上像传统的表格一样处理你的div。
使用新的CSS Flexbox。 Example
使用基于JavaScript的插件，如matchHeight

我确信还有其他几种方式，其中没有一种是完美的。

HTML / CSS等于列高度

2 个答案: