Question

我正在通过网站栏进行进展，我遇到了问题。有四个跨度元素表示首页的各个部分，当您单击其中一个时，它会滚动到该部分位置。问题是出于某种原因， span元素比div更高它更高，为此，我不能垂直对齐它。在您尝试使用较小分辨率的网站之前，这不是问题，因为span元素溢出了div。

我正在谈论

Here

请参阅右侧属性是因为脚本根据剖面位置定位了范围。

here是问题变得明显的地方

这是HTML：

<header id="masthead" class="site-header" role="banner" style="position: relative; top: auto;">
<div class="container-fluid">
    <div class="row">

                <div id="progressDiv"> 
                    <span id="progBar">
                    </span>
                    <div id="SectionsPos"> 
                      <a href="/#features">
                        <span id="novedPos" class="sectPos"> Novedades </span>
                      </a>
                      <a href="/#about">
                        <span id="redesPos" class="sectPos tooBig"> Redes Sociales </span>
                      </a>
                      <a href="#ProductosPrinc">
                        <span id="prodPos" class="sectPos"> Productos </span>
                      <a href="#Contacto">
                        <span id="contPos" class="sectPos"> Contacto </span>
                      </a>
                    </div>      
                </div>

    </div>
</div>

这是CSS：

    #progressDiv {
    display: block;
    border: solid 1px;
    border-color: #d9b25f;
    position: relative;
    width: 100%;
    height: 10vh;
}

#progBar {
    height: inherit;
    display: block;
    width: 0%;
    background: #d9b25f;
    max-width: 100%;    
}


#SectionsPos{
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    height: 10vh;
    margin-top: -5vh;
}

.sectPos {
    font-weight: 900;
    color: white!important;
    position: absolute;
}

请原谅我的英语，这不是我的母语，如果有什么不完全清楚请告诉我，我会尽力解释自己

Answer 1

我有点解决了它，但它不是一个实际的解决方案，而是一种避免问题的方法，我改变了像素单位，显然你不能做我想用vh单位做的事情

为什么这个跨度的高度比它的父级高

1 个答案: