HTML / CSS等于列高
[英]HTML/CSS Equal Column Heights
问题描述
我已经尝试了很多，以使所有三列都保持相等的高度，但是没有任何效果。 移动窗口并使所有三列看起来都相同时，我需要保持相等的高度，即使第1列中的上下文比其他两列多得多，导致第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 "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>
2 个解决方案
解决方案1
0 已采纳 2015-10-06 14:24:16
我建议设置标准高度，并在上下文大于您的div时使用overflow-y:auto
解决方案2
0 2015-10-06 14:40:00
有几种方法可以满足您的需求：
在包装类上使用
display:table，并在列上使用display:table-cell。 这实际上将您的div视为传统表列。使用新的CSS Flexbox。 例
使用基于JavaScript的插件，例如matchHeight
我敢肯定，还有其他几种方法，没有一种是完美的。
在线使用CSS等于柱高
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.