2016-12-26 1 views
-1

사이트 바를 진행하고 있는데 문제가 있습니다. 네 개의 스팬 요소이 있는데, 그 중 하나를 클릭하면 해당 섹션 위치로 스크롤됩니다. 문제는 어떤 이유로 든 span 요소가 div cointaining it보다 크고 그 때문에 세로로 정렬 할 수 없습니다. 더 작은 해상도에서 웹 사이트를 사용하려고 시도하기 전까지는 문제가되지 않습니다. span 요소는 div를 오버플로합니다.왜이 스팬이 부모보다 큰 스팬입니까

Here 내가 약

오른쪽 속성 때문에 섹션의 위치에 따라 범위를 배치하는 스크립트의 것을 참조 이야기하고있는 것입니다.

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

변명 내 영어, 그것을 문제가 명백한 된 곳에

그리고 here 여기

는 HTML입니다 제 모국어가 아닙니다. 완전히 그렇지 않은 것이 있다면 분명히 말해줘. 나 자신을 더 잘 설명하려고 노력할 것이다.

+2

여기에 모든 메뉴 코드를 올리시기 바랍니다. –

+0

내가 이해하는 것은 그 메뉴가 반응 적이어야하고 그걸 부트 스트랩으로 사용하고있는 것처럼 보입니다. 하지만 여기에서는 부트 스트랩을 잘 사용하지 않습니다. 내 이해가 정확한지 알려주세요. – Prasoon

+0

상위 div에 최소 높이를 설정하면 해당 길이가 결코 커지지 않습니다. 유감스럽게도 코드를 게시하지 않으면 더 이상 도움을 드릴 수 없습니다. – derloopkat

답변

0

나는 그것을 풀어 낸다. 그러나 실제 해결책은 아니지만 문제를 피하는 방법이다. 나는 픽셀 단위에 대해 vh를 바꿨다. aparently cant 내가 무엇을하고 싶은지 vh 단위를 사용하고 싶습니다.

관련 문제