CSS: Dahili bağlantılar ve eşit sütun yükseklikleri [jsfiddle] ile sorun

Question

Eşit yükseklik sütunların görünümünü elde etmek için tek çözüm bir CSS kullanıyorum

:

Yani

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

o böyle yaptığımda:

<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> 

... her iki sütunda da aynı yükseklik görünüyor. Çalıştığım sorun, bir iç bağlantı linki ziyaret edildiğinde, sayfanın üzerindeki her şey kesiliyor. https://jsfiddle.net/7ctkL4yx/

Bildirim sadece HTML kaydırma, harika görünüyor: Burada

bir jsfiddle olduğunu. Şimdi, bir bağlantıyı tıklamayı deneyin ve üzerinde bulunan tüm içeriği dikkatlice kırpın.

Bunu nasıl düzeltebilirim?

.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 elemanın belirli kısmının ötesinde bir şey keser ve bir bağlantı atladığında, metnin o çizgiye atlamak. Değiştirilecek varsayılan link davranışı için doğal CSS çözümü yoktur, alas. Bunun yerine, herhangi bir içerik kesilmeden yüksekliği korumak için .equal-height-row sınıfında overflow: scroll olmasını istiyorsunuz.

Ya da sadece flexbox'a kullanabilir ve esnek konteyner olarak kurmak için flex arasında .equal-height-row bir display özellik verebilir. flexbox'a ile, eşit sütun yüksekliğinin kurulması için padding-bottom: 99999px;margin-bottom: -99999px; kesmek gerekmez, bu nedenle CSS olacaktır:

Bunu düzeltmek, ancak nasıl

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