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解决方案，唉。相反，您希望overflow: scroll代替.equal-height-row类，以保持高度，而不会切断任何内容。

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

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

CSS：内部链接和相等列高度的麻烦[jsfiddle]

1 个答案: