Wie können Höhen von inneren Divs zur Höhe der Eltern-Divs addiert werden? Welche Rolle spielt die Linienhöhe?

** Hier möchte ich Header-Top und Seiten-Navigation perfekt in den Header passen. ** Hier ist Header 100px mit 20px Top-Padding, Header-Top ist 32px, so Seiten-Navigation sollte 48px passen. Aber es passt auf Zeilenhöhe 58px. Auch wenn ich die Zeilenhöhe ändere: 58px, bricht es. Alles was ich vermisse?Wie können Höhen von inneren Divs zur Höhe der Eltern-Divs addiert werden? Welche Rolle spielt die Linienhöhe?

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Open sans", sans-serif; 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
} 
 

 
header { 
 
    padding: 20px 20px 0 20px; 
 
    background-color: #f8faee; 
 
    position: relative; 
 
    height: 100px; 
 
    box-sizing: border-box; 
 
    border-bottom: 1px solid #eeeeee; 
 
} 
 

 
.header_top { 
 
    height: 32px; 
 
} 
 

 
.learning-site-name { 
 
    float: left; 
 
    font-size: 18px; 
 
    color: #000; 
 
    padding-top: 5px; 
 
    line-height: 18px; 
 
} 
 

 
.pages_navigation { 
 
    line-height: 58px; 
 
    font-size: 14px; 
 
    margin-left: -5px; 
 
    clear: both; 
 
    box-sizing: border-box; 
 
} 
 

 
.highlighted, 
 
.not-highlighted { 
 
    padding: 0 5px 8px 5px; 
 
} 
 

 
.highlighted { 
 
    border-bottom: 1px solid black; 
 
    color: black; 
 
} 
 

 
.not-highlighted { 
 
    cursor: pointer; 
 
    color: #999999; 
 
} 
 

 
.pages_navigation span:nth-child(2) { 
 
    display: inline-block; 
 
    width: 30px; 
 
}

<body> 
 
    <div id="container"> 
 
    <header> 
 
     <div class="header_top"> 
 

 
     <div class="learning-site-name">Learning Site Name</div> 
 

 
     </div> 
 

 
     <!-- creating an empty span inline block to make space in between 2 spans --> 
 
     <div class="pages_navigation"> 
 

 
     <span id="learning-board" class="highlighted">Learning Board</span> 
 

 
     <span></span> 
 

 
     <span id="content-files" class="not-highlighted">Content Files</span> 
 

 
     </div> 
 

 
    </header> 
 
    </div> 
 
</body>

Quelle

2017-05-13 Akshay Gupta

Es ist wegen der box-sizing: border-box; des Headers. Wenn Sie diese Eigenschaft festlegen und height 100px; padding-top: 20px; festlegen, bedeutet das, dass die tatsächliche Höhe von header 80px ist. In einem anderen Wort box-sizing: border-box; machen Sie das Padding und die Grenze zählen als die Höhe des Elements.

Der bessere Weg ist, die Höhe von header zu entfernen und lassen Sie ihre Kinder Höhe machen.

Quelle

2017-05-13 20:53:02

Ja, das funktioniert! Vielen Dank! –

@AkshayGupta .... Sie sind willkommen! –

Wie können Höhen von inneren Divs zur Höhe der Eltern-Divs addiert werden? Welche Rolle spielt die Linienhöhe?

Antwort

Verwandte Themen