html - 使用等高列时， anchor 链接将内容推到容器外

Question

所以这是一个有趣的小“功能”。您知道吗，如果您使用的是等高列布局并包含 anchor 链接，单击其中一个链接会完全弄乱您的布局？在我的例子中，内容被推出容器而不是跳到正确的部分并保持我的布局完好无损。

Here's my example.尝试单击右侧边栏中的文本链接之一。

所以标记是这样的:

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

#content {
  width: 350px;
  overflow: hidden;
  margin: 0 auto;
}
.main {
  width: 66.6666667%;
  min-height: 200px;
  background: gray;
  float: left;
}
.sidebar {
  float: left;
  width: 33.3333333%;
  min-height: 80px;
  background: red;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

<div id="content">
  <div class="main">
    
    <div id="firstanchor">
      <img src="http://placehold.it/350x150">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem inter haec tantam multitudinem hominum interiectam non vides nec laetantium nec dolentium? In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Duo Reges: constructio interrete. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Quis est, qui non oderit libidinosam, protervam adolescentiam?</p>
    </div>
    
    <div id="secondanchor">
      <img src="http://placehold.it/250x150">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oratio me istius philosophi non offendit; Ita nemo beato beatior. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Duo Reges: constructio interrete. Esse enim, nisi eris, non potes. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Itaque hic ipse iam pridem est reiectus;</p>
    </div>
  </div>
  <div class="sidebar">
    <a href="#secondanchor">Go to second anchor</a>
  </div>
</div>

有没有办法让我绕过这个问题并仍然保持我的等高列？

Answer 1

我有一个解决方案给你，用 flexbox 解决了:

html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing:inherit;
    box-sizing:inherit;
}
#content {
    align-items:stretch;
    display:flex;
    margin:0 auto;
    overflow:hidden;
    width:350px; 
}
.main {
    background:gray;
    display:flex;
    flex-direction:column;
    float:left;
    min-height:200px;
    width:66.6666667%;
}
.sidebar {
    align-items::stretch;
    background: red;
    display:flex;
    float:right;
    min-height:80px;
    width:33.3333333%;
}

<div id="content">
    <div class="main">
        <div id="firstanchor">
            <img src="http://placehold.it/350x150"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem inter haec tantam multitudinem hominum interiectam non vides nec laetantium nec dolentium? In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Duo Reges: constructio interrete. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Quis est, qui non oderit libidinosam, protervam adolescentiam?</p>
        </div>
        <div id="secondanchor">
            <img src="http://placehold.it/250x150"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oratio me istius philosophi non offendit; Ita nemo beato beatior. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Duo Reges: constructio interrete. Esse enim, nisi eris, non potes. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Itaque hic ipse iam pridem est reiectus;</p>
        </div>
    </div>
    <div class="sidebar">
        <a href="#secondanchor">Go to second anchor</a>
    </div>
</div>