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です：ちょうどHTMLをスクロールhttps://jsfiddle.net/7ctkL4yx/

お知らせ、それは素晴らしい見えます。さて、リンクをクリックしてみると、上のすべてのコンテンツが切り取られていることがわかります。

これを修正するにはどうすればよいですか？

.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を使用して、内容を切り捨てずに高さを保持します。

フレックスボックスを使用して、.equal-height-rowのdisplayプロパティをflexにしてフレックスコンテナとして設定することができます。フレキシボックスを使用すると、同じ列の高さを確立するためのpadding-bottom: 99999px;margin-bottom: -99999px;ハックを必要としないので、あなたのCSSは次のようになります。

これを修正するが、これにどのように

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