html - 高度/顶部属性与 anchor 之间的相关性

Question

给定以下代码段:

* {
  padding: 0;
  margin: 0;
}

#container {
  width: 600px;
  height: 300px;
  background-color: cyan;
  overflow: hidden;
}

#inner1 {
  position: relative;
  width: 40%;
  height: calc(100% - 50px);
  background-color: #f00;
  overflow-y: scroll;
}

#inner2 {
  width: 100%;
  background-color: #ff0;
}

#footer {
  background-color: #fff;
  width: 600px;
}

#ancore {
  background-color: pink;
  margin-top: 30px;
  width: 40%;
}

<div id="container">
  <div id="ancore">
      <a href="#gobottom">Bottom</a> <a href="#top">Top</a>
  </div>
  <div id="inner1">
    <a name="top"></a>
    <div id="inner2">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>  
    </div>
    <a name="gobottom"></a>
  </div>
</div>
<div id="footer">
  <p>My Footer</p>
</div>

我想了解一些关于它的事情。

1)

我是否被迫使用 calc 函数将 height 属性设置为 #inner1 div？

在现实世界中，我可能很难理解所有不同的高度。 在这个非常简单的例子中，50px 来自 margin-top 的 30px 和页脚的 20px(即使我没有为它设置高度值!)。

是否有任何不同的方法来获得代码段的相同行为？

2)

如果我在 calc 函数中编写的公式是错误的，那么 anchor 将无法正常工作并且 div 会从其原始位置移动。特别是当高度太高时会发生这种情况。

为什么会这样？

感谢您的帮助。

Answer 1

#1
您正在尝试将元素的高度设置为父元素的高度(OP 中的 #container)减去 sibling 元素的高度( #ancore) 及其在同一个父级中的所有偏移量(边距等)。

如果父级是设置的高度，比如你的例子，你可以手动计算并简单地在css中设置height:250px;。

如果父级是可变高度(例如 %)，那么 calc() 会很方便。对于宽度，这种行为(占用所有未被同级元素占用的空间)可以通过 float 来实现。高度比较棘手 - calc() 是典型的解决方案。如果您需要不使用 calc() 的解决方法，例如对于不支持它的浏览器，您唯一的 HTML/CSS 选项是使用表格:

* {
  padding: 0;
  margin: 0;
}

#container {
  width: 600px;
  height: 300px;
  background-color: cyan;
  overflow: hidden;
  padding-top:30px;
}
#container table{
  width:40%;
  height:100%;
  border-collapse:collapse;
}

#inner1 {
  position: relative;
  background-color: #f00;
}

#inner2 {
  height: 100%;
  background-color: #ff0;
  overflow-y: scroll;
}

#footer {
  background-color: #fff;
  width: 600px;
}

#ancore {
  background-color: pink;
}

<div id="container">
  <table>
    <thead>
      <tr><th id="ancore"><a href="#gobottom">Bottom</a> <a href="#top">Top</a></th></tr>
    </thead>
    <tbody>
      <tr>
        <td id="#inner1">
          <div id="inner2">
            <a name="top"></a>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>  
            <a name="gobottom"></a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div id="footer">
  <p>My Footer</p>
</div>

#2
您必须证明这种行为，我无法根据您的原始示例重新创建您所描述的内容。尝试上述修复，看看是否有帮助。