CSS:内部链接和列高度相等的问题[jsfiddle]

Question

我正在使用仅CSS的解决方案来获得等高列的外观：

.equal-height-row {
    overflow: hidden;
}
.equal-height-col {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}

所以当我这样做的时候：

<div class="equal-height-row">
    <div class="left equal-height-col">
      <p>This is the first column.</p>
    </div>
    <div class="right equal-height-col">
      <p>This is the second column.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.</p>
    </div>
</div>

两列看起来高度相同。我遇到的问题是，当一个内部锚链接被访问时，它上面的所有内容都会被从页面上删除。

这是一个jsfiddle：https://jsfiddle.net/7ctkL4yx/

注意，只需滚动HTML，它看起来很棒。现在，试着点击一个链接，注意上面的所有内容都被剪掉了

我该如何更正？

.left {
  float: left;
  width: 50%;
  background: red;
}
.right {
  float: left;
  width: 50%;
  background: blue;
}
.equal-height-row {
    overflow: hidden;
}
.equal-height-col {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}

<p>
<a href="#first">First</a><br />
<a href="#second">Second</a>
</p>
<div class="equal-height-row">
<div class="left equal-height-col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
</div>
<div class="right equal-height-col">
<p id="first">FIRST ANCHOR<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p id="second">SECOND ANCHOR<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
</div>
</div><!--/.equal-height-row-->

Answer 1

overflow: hidden截断元素特定部分之外的任何内容，当您跳转到链接时，您会跳转到文本的那一行。遗憾的是，没有一个原生的CSS解决方案可以改变默认的链接行为。相反，您希望.equal-height-row类上的overflow: scroll保持高度，而不会截断任何内容。

或者，您可以使用flexbox，并为.equal-height-row提供flex的display属性，以将其建立为您的flex容器。使用flexbox，您将不需要padding-bottom: 99999px;margin-bottom: -99999px;破解来建立相等的列高度，因此您的CSS将是：

.left {
  background: red;
}
.right {
  background: blue;
}
.equal-height-row {
display: flex;
}