Question

给出以下代码段：

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

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

1）

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

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

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

2）

如果我在calc函数中编写公式是错误的，那么锚点工作不好并且div会从原始位置移开。特别是当高度过高时会发生这种情况。

为什么会这样？

感谢您的帮助。

Answer 1

<强>＃1
您正在尝试将元素的高度设置为父元素（OP中的#container）的高度，减去兄弟元素（#ancore）的高度，并且它在同一个父母中的所有偏移（边缘等）。

如果父级是设置高度，例如您的示例，则可以手动执行计算，只需在css中设置height:250px;即可。

如果父级是高度可变（例如％），则calc()会变得很方便。对于宽度，这种行为（占用兄弟元素尚未占用的所有空间）可以用浮点数完成。高度比较棘手 - calc()是典型的解决方案。如果您需要没有calc()的解决方法，例如对于不支持它的浏览器，您唯一的HTML / CSS选项是使用表格：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

<强>＃2
您必须演示此行为，我无法重新创建您在原始示例中描述的内容。尝试上述修复程序，看看它是否有帮助。

高度/顶部属性与锚点

1 个答案: