Question

我的问题与this之前回答的问题高度相关。实际上，@harpo在最高投票答案的评论中提供的解决方案对我来说是一个部分解决方案。但是，我发现它实际上不适用于我的某些元素，特别是具有border s的元素。

某些上下文：我正在为我的页面使用Bootstrap，并且我在顶部有一个固定的导航栏，然后在这些div中有一个没有样式divs和.panel div的页面。我的body上有一个60px的顶部填充，它将所有内容都推到了导航栏中。但是，当我点击带有偏移量的链接（例如example.com#div2-1）时，div的顶部仍会被导航栏覆盖。

使用上面链接答案中提供的解决方案，我在:before元素上放置60px的负填充（将元素向上拉60px），然后通过将高度设置为60px再将其向下推60px。这没有产生任何视觉差异（有意），但我的div的计算高度现在高60px，div比它应该提前60px，真实内容开始60px以后。这实质上会再次抵消导航栏的内容。

但是，我发现在具有边框的元素（例如我的.panel元素）上，边框似乎包含所有内容，而:before伪元素我不再具有影响我的div的计算高度，这意味着它再次被导航栏覆盖。

这是我在JSFiddle上的代码：http://jsfiddle.net/rszqtw80/3/

如果您在任何开发工具中查看渲染结果，您可以清楚地看到:before元素已正确创建并且外部和内部{{1}的高度（60px）正确}。但是对于内部divs s，元素的总体计算高度最终不包括div元素。使用Chrome开发者工具禁用:before使其对我有用，因此我推断边框是问题所在。

所以我的问题：是否有可能让这个基于CSS的偏移量与我的border元素一起使用而不会丢失.panel或者不得不回到每个地方插入border标记？因为老实说，如果没有a，border看起来很难看，并且.panel标记中的每个div的嵌套也非常难看。

提前致谢！

编辑：稍微重写我的问题，希望能清除对我的意图的任何误解。对不起我的令人困惑的解释:(

进一步编辑：我添加了3个屏幕截图，希望能够比任何单词都希望做的更好地演示。我会在这里添加它，但由于缺乏“声誉”，我不能添加两个以上的链接。

Answer 1

你真的不需要：before标签。

jsfiddle.net/rszqtw80/8 /

为您解释：＆gt; selector选择元素的所有直接子元素。

.first-element > .all-direct-children

<a class="first-element">
    <div class="all-direct-children">
        <div id="notthisone" class="all-direct-children">
        </div>
    </div>
</a>

元素#notthisone不会受到您的更改的影响。使用nth-child，您可以选择您想要的任何孩子。在你的情况下，我用这个来给第一个Div，Div 2之后的第一个锚点。等于0的边距，这样它就不会从你的标题（Div 1，Div 2）等分开。

Answer 2

在咨询了多个人之后，我只是放弃并将我的div嵌套在另一个div中。

<div class="container">
    ...

    <div id="div2" class="anchor">
        <div>
            Div 2
        </div>
        <div id="div2-1" class="anchor" >
            <div class="panel panel-default">
                <div class="panel-heading">
                    Div 2-1
                </div>
                <div class="panel-body panel-collapse collapse in">
                    ...
                </div>
                <div class="panel-footer">
                    ...
                </div>
            </div>
            ...
        </div>
    </div>

    ...
</div>

我希望避免在我的DOM中添加另一层，但似乎没有帮助它。

具有边框的HTML元素的偏移锚点，以调整固定标题

2 个答案: