2016-12-26 9 views
-1

のものよりも大きい高さを持っていません。あなたはそれがそのセクションの位置までスクロールし、それらのいずれかをクリックすると、FrontPageのセクションを表し4つのスパン要素があります。問題は、何らかの理由で、span要素はそれをcointaining DIVよりも背が高い、そしてそのために、私は垂直に揃えることができません。より小さな解像度でウェブサイトを使用しようとするまで問題はありません。スパン要素がdivをオーバーフローさせます。は、なぜ、このスパンは、それは私がサイトバーthrought進行をやっていると私は問題を抱えている親

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

は私の英語すみません、それは問題がHTMLである。ここ

明らかになったところ

そしてhereです私の母国語ではない、もし完全ではないことがあれば私に知らせてください私は自分自身をより良く説明しようとします

+2

を使ってやりたいことやる私はあなたがそのメニューが応答するようにしたいということであり、また、あなたがそのために、ブートストラップを使用しているように見える理解して何ここ –

+0

をメニューコードのすべてを投稿してください。しかし、ここではブートストラップをうまく利用していません。私の理解が正しいかどうかを教えてください。 – Prasoon

+0

は、親のdiv、スパンは背が高くなることはありませんそのように最小の高さを設定してみてください。残念ながら、あなたのコードを公開しない限り、私たちはもっと助けられません。 – derloopkat

答えて

0

私はそれを解決しましたが、実際の解決策ではありませんが、問題を避けるために、私はピクセル単位のためにvhを変更しました。私はVHユニット

関連する問題