HTML/CSS 列高相等
HTML/CSS Equal Column Heights
我已经尝试了很多让所有三列保持相同的高度，但没有任何效果。当我移动 window 并使所有三列看起来相同时，我需要保持相同的高度，即使第 1 列中的上下文比其他两列多得多，导致第 1 列扩展得更多 - 所以第 2 和第 3 列。
CSS 是第一个框，html 是第二个框。我的实际站点有这个 link：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 "Trainer Depot"" 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>
我建议设置标准高度，并在上下文大于 div
时使用 overflow-y:auto
有几种方法可以满足您的需求：
在包装 class 上使用 display:table，在列上使用 display:table-cell。这实质上将您的 div 视为传统的 table 列。
使用新的 CSS Flexbox。 Example
使用基于 JavaScript 的插件，例如 matchHeight
我敢肯定还有其他几种方法，none 其中非常完美。
我已经尝试了很多让所有三列保持相同的高度，但没有任何效果。当我移动 window 并使所有三列看起来相同时，我需要保持相同的高度，即使第 1 列中的上下文比其他两列多得多，导致第 1 列扩展得更多 - 所以第 2 和第 3 列。
CSS 是第一个框，html 是第二个框。我的实际站点有这个 link：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 "Trainer Depot"" 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>
我建议设置标准高度，并在上下文大于 div
时使用overflow-y:auto
有几种方法可以满足您的需求：
在包装 class 上使用
display:table，在列上使用display:table-cell。这实质上将您的 div 视为传统的 table 列。使用新的 CSS Flexbox。 Example
使用基于 JavaScript 的插件，例如 matchHeight
我敢肯定还有其他几种方法，none 其中非常完美。