当使用相等高度列时，锚链接将内容推送到容器外部

时间：2015-10-16 08:37:21

标签： html css

所以这是一个有趣的小功能＆＃34;。您是否知道如果您使用相同的高度列布局并包含锚链接，单击其中一个链接将完全弄乱您的布局？在我的情况下，内容被推出容器，而不是跳到正确的部分，并保持我的布局完整。

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

所以标记就像这样：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

有没有办法解决这个问题并保持我的平等高度？

2 个答案:

答案 0 :(得分：1)

我有一个解决方案，用flexbox解决了：

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我真的不知道你为什么要使用这个paddings and margings -9999px 但这里有一个不同方法的解决方案。

第一种方式：

由于您在%上设置了宽度休息列，因此您只需执行此侧边栏。 我知道它可能不是你想要的东西但是 - 它也可能有帮助:) 

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;
position: relative;
}
.main {
  width: 66.6666667%;
  min-height: 200px;
  background: gray;
  float: left;
}
.sidebar {
  width: 33.3333333%;
  position: absolute;
  height: 100%;
  right:0;
  top: 0;
  background: red;
}
<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>

第二种方式：

第二种方式 - 你的方式是。 我找到了解决方案img推送了你的内容侧边栏，所以你需要在#main和#main上.sidebar float: none;内保持所有内容{/ 1}} 

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;
  position: relative;
}
.main {
  width: 66.6666667%;
  min-height: 200px;
  background: gray;
  float: left;
}
.main img{
  max-width: 100%;
 }
.sidebar {
  width: 33.3333333%;
  position: absolute;
  height: 100%;
  right:0;
  top: 0;
  background: red;
}
<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>

相关问题
最新问题