使所有浮动DIVS高度相同

Question

问题

我的页脚中有四列，除了最后一列之外，我已经设置了border-right：

它们都处于可变高度，并且由于内容也是可变的，我无法确定任何列的绝对高度值。

如何确保所有列的高度相同，以使它们之间的边界长度相等？

代码

body,
html {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  line-height: 1.62em;
  font-weight: lighter;
  padding-top: 15px;
}
a {
  color: inherit;
  text-decoration: inherit;
}
div#footer {
  background: #333;
  text-shadow: none;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
  color: #ccc;
  padding: 20px 0;
  text-shadow: 0 1px 1px #111;
  width: 100%;
}
div.wrapper {
  width: 100%;
  max-width: 1080px;
  margin: auto;
}
div#footer div.wrapper div.column {
  width: 25%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  float: left;
}
div#footer div.wrapper div.column h4 {
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  color: white;
  /*border-bottom: 1px dashed #555;*/
  line-height: 2em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
div#footer div.wrapper div.column ul {
  margin-bottom: 1.62em;
}
div#footer div.wrapper div.column ul li,
div#footer div.wrapper div.column p {
  padding: 0;
}
div#footer ul.footerList li:before {
  font-family: 'FontAwesome';
  content: '\f0da';
  margin: 0 5px 0 0px;
}
div#footer ul.footerList li {
  padding-left: 15px;
}
div#footer ul.footerList li span {
  font-weight: inherit;
}
div#footer .right {
  text-align: right;
}
div#footer p.meta {
  font-size: 10px;
  color: #777;
  line-height: 1.62em;
  text-align: right;
}
div#footer form {
  width: 100%;
  margin: 0;
  padding: 0;
  margin-bottom: 1.62em;
}
div#footer input {
  padding: 8px 12px;
  font-family: inherit;
  border: none;
  margin: 0;
  font-size: 14px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div#footer label {
  display: block;
}
div#footer input[type="text"],
div#footer input[type="email"] {
  width: 80%;
}
div#footer input[type="submit"] {
  width: 20%;
  background: #FD5001;
  color: white;
  cursor: pointer;
}
div#footer form input[type="email"] {
  border-radius: 2px 0 0 2px;
}
div#footer form input:last-child {
  border-radius: 0 2px 2px 0;
}
div#footer input[type="submit"]:hover {
  background: #FD7902;
}
div#footer input[type="submit"]:active {
  background: #B03700;
}
div#footer input:focus {
  border-color: black;
}

<footer>
  <div id="footer">
    <div class="wrapper">
      <div class="column">
        <ul class='footerList'>
          <li>
            <a href='./article/11/5-things-to-consider-when-you-get-a-counter-offer'>5 Things To Consider When You Get A Counter Offer</a>
          </li>
          <li>
            <a href='./article/8/quitting-your-job-without-the-guilt'>Quitting your job without the guilt</a>
          </li>
          <li>
            <a href='./article/7/are-you-asking-the-right-questions-when-on-interview'>Are you asking the right questions when on interview?</a>
          </li>
          <li>
            <a href='./article/5/ever-thought-of-recruitment'>Ever thought of Recruitment?</a>
          </li>
          <li>
            <a href='./article/4/what-s-your-new-year-s-resolution'>What's your New Year's Resolution?</a>
          </li>
        </ul>
      </div>
      <div class="column">
        <ul class='footerList'>
          <li>
            <a href='./job/15/audit-and-accounts-senior'>London: Audit and Accounts Senior</a>
          </li>
          <li>
            <a href='./job/14/advanced-senior-bookkeeper'>London: Advanced Senior Bookkeeper</a>
          </li>
          <li>
            <a href='./job/11/new-business-specialist-manager'>Auckland: New Business Specialist Manager</a>
          </li>
          <li>
            <a href='./job/10/coo-leading-global-assistance'>Auckland: COO Leading Global Assistance</a>
          </li>
          <li>
            <a href='./job/9/claims-team-manager'>Auckland: Claims Team Manager</a>
          </li>
        </ul>
      </div>
      <div class="column">
        <h4>Social</h4>
        <ul>
          <li>
            <a href="#" target="_blank">
              <i class="fa fa-twitter fa-fw"></i>Twitter
            </a>
          </li>
          <li>
            <a href="#" target="_blank">
              <i class="fa fa-linkedin fa-fw"></i>LinkedIn
            </a>
          </li>
        </ul>
        <h4>Important Links</h4>
        <ul>
          <li>
            <a href="/">Homepage</a>
          </li>
          <li>
            <a href="/privacy">Privacy Policy</a>
          </li>
          <li>
            <a href="/terms">Terms of Use</a>
          </li>
          <li>
            <a href="/contact">Contact Us</a>
          </li>
        </ul>
      </div>
      <div class="column" style="border-right: none;">
        <h4>Jobseeker Pack</h4>
        <form id="footerForm">
          <label for="footerInput">Get your free Jobseekers' information pack:</label>
          <input type="email" name="email" placeholder="Email Address" id="footerInput">
          <input type="submit" value="Go" name="footerSubmit">
        </form>
        <p>Part of REDACTED</p>
        <img src="img/REDACTED.png">
        <p class="meta">Website designed and developed by REDACTED. Copyright&copy; REDACTED 2015. All rights reserved.</p>
      </div>
      <div style="clear:both;"></div>
    </div>
  </div>
</footer>

Answer 1

将包装设置为display: table并将列设置为display: table-cell（并移除浮动）

所以它看起来像这样：

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

Answer 2

将display: flex;添加到div.wrapper这默认会使直接子元素的高度相同。

有关display flex的更多信息，请参见MDN article或此CSS trick article

Answer 3

尝试这种方式

div.wrapper{
    position:relative;
    }
    .column + .column:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      border-left: solid 1px #ccc;
    }

Answer 4

您可以使用jquery将其归档。

$(document).ready(function(){
        $('.wrapper').each(function(){  
            var highestBox = 0;
            $('.column', this).each(function(){
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            $('.column',this).height(highestBox);
    });
});

body, html {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	line-height:1.62em;
	font-weight:lighter;
	padding-top:15px;
}

a {
	color:inherit;
	text-decoration:inherit;
}

p { font-weight: lighter; }


div#footer {
	background:#333;
	text-shadow:none;
	color:white;
	box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
	color:#ccc;
	padding: 20px 0;
	font-size: 12px;
	
	text-shadow: 0 1px 1px #111;
    width:100%;
}

div.wrapper {
	width:100%;
	max-width:1080px;
	margin: auto;
}

div#footer div.wrapper div.column {
	/*width: calc(100%/3);*/
	width:25%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding: 0 10px;	
	border-right: 1px solid rgba(255,255,255,0.3);
    float: left;
}

div#footer div.wrapper div.column h4 {
	font-weight:normal;
	font-size: 16px;
	text-align: left;
	color: white;
	/*border-bottom: 1px dashed #555;*/
	line-height:2em;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

div#footer div.wrapper div.column ul { margin-bottom: 1.62em; }
div#footer div.wrapper div.column ul li,
div#footer div.wrapper div.column p {
	padding: 0;
}

div#footer ul.footerList li:before {
	font-family: 'FontAwesome';
	content: '\f0da';
	margin: 0 5px 0 0px;
}

div#footer ul.footerList li {
	padding-left: 15px;
}

div#footer ul.footerList li span {
	font-weight:inherit;
}

div#footer .right {
	text-align:right;
}

div#footer p.meta { font-size: 10px; color: #777; line-height: 1.62em; text-align: right;}

div#footer form {
	width: 100%;
	margin: 0; padding: 0;
	margin-bottom: 1.62em;
}

div#footer input {
	padding: 8px 12px;
	font-family: inherit;
	border: none;
	margin: 0;
	font-size:14px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

div#footer label { display:block; }

div#footer input[type="text"],
div#footer input[type="email"]{ width:80%; }
div#footer input[type="submit"]{
	width:20%;
	background: #FD5001; 
	color:white; cursor:pointer;
}

div#footer form input[type="email"] { border-radius: 2px 0 0 2px; }
div#footer form input:last-child{ border-radius: 0 2px 2px 0; }

div#footer input[type="submit"]:hover { background: #FD7902; }
div#footer input[type="submit"]:active { background: #B03700; }
div#footer input:focus { border-color:black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<footer>
    <div id="footer">
        <div class="wrapper">
            <div class="column">
                <ul class='footerList'>
                    <li>
                        <a href='./article/11/5-things-to-consider-when-you-get-a-counter-offer'>5 Things To Consider When You Get A Counter Offer</a>
                    </li>
                    <li>
                        <a href='./article/8/quitting-your-job-without-the-guilt'>Quitting your job without the guilt</a>
                    </li>
                    <li>
                        <a href='./article/7/are-you-asking-the-right-questions-when-on-interview'>Are you asking the right questions when on interview?</a>
                    </li>
                    <li>
                        <a href='./article/5/ever-thought-of-recruitment'>Ever thought of Recruitment?</a>
                    </li>
                    <li>
                        <a href='./article/4/what-s-your-new-year-s-resolution'>What's your New Year's Resolution?</a>
                    </li>
                </ul>
            </div>
            <div class="column">
                <ul class='footerList'>
                    <li>
                        <a href='./job/15/audit-and-accounts-senior'>London: Audit and Accounts Senior</a>
                    </li>
                    <li>
                        <a href='./job/14/advanced-senior-bookkeeper'>London: Advanced Senior Bookkeeper</a>
                    </li>
                    <li>
                        <a href='./job/11/new-business-specialist-manager'>Auckland: New Business Specialist Manager</a>
                    </li>
                    <li>
                        <a href='./job/10/coo-leading-global-assistance'>Auckland: COO Leading Global Assistance</a>
                    </li>
                    <li>
                        <a href='./job/9/claims-team-manager'>Auckland: Claims Team Manager</a>
                    </li>
                </ul>
            </div>
            <div class="column">
                <h4>Social</h4>
                <ul>
                    <li>
                        <a href="#" target="_blank">
                            <i class="fa fa-twitter fa-fw"></i>Twitter
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                            <i class="fa fa-linkedin fa-fw"></i>LinkedIn
                        </a>
                    </li>
                </ul>
                <h4>Important Links</h4>
                <ul>
                    <li>
                        <a href="/">Homepage</a>
                    </li>
                    <li>
                        <a href="/privacy">Privacy Policy</a>
                    </li>
                    <li>
                        <a href="/terms">Terms of Use</a>
                    </li>
                    <li>
                        <a href="/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="column" style="border-right: none;" >
                <h4>Jobseeker Pack</h4>
                <form id="footerForm">
                    <label for="footerInput">Get your free Jobseekers' information pack:</label>
                    <input type="email" name="email" placeholder="Email Address" id="footerInput">
                        <input type="submit" value="Go" name="footerSubmit">
                        </form>
                        <p>Part of REDACTED</p>
                        <img src="img/REDACTED.png" >
                            <p class="meta" >Website designed and developed by REDACTED. Copyright&copy; REDACTED 2015. All rights reserved.</p>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
            </footer>