CSS gövdesi ve tam boy yükseklik kullanmayan diğer div'ler

Question

CSS + HTML kullanarak birkaç basit web sitesi oluşturdum. Bu web sitesinde

, ben div bir dizi ..

• vücut
  • sayfa
    • girişleri
      • giriş basamaklı olan

ve bu yüzden (1) gövde ve PAGE hem diğer div'leri çevrelemek için, ve daha da önemlisi (2), gövde ve PAGE yüksekliği her çocuğun en azından toplam yayılan beklenen divs .. ama bu olmaz. İstediğim davranışlarda sonuçları var.

Bu yüzden benim sorum 1 ve 2'nin neden oluyor? CSS Basamaklı Stil Sayfaları anlamına gelir ve bu yüzden basamaklandırmanın daha açık olmasını bekledim. Büyük olasılıkla ben yanlış bir şey yapıyorum ..: alt öğeler ediliyor Çünkü

https://jsfiddle.net/wgc8mxad/

body { 
    padding: 0; /* don't let the browser try to be fancy */ 
    margin: 0; /* don't let the browser try to be fancy */ 
    box-sizing: border-box; /* div width, height, border and padding included. margin not */ 
    word-wrap: break-word; /* break words to avoid text going outside of div */ 
} 

/* Default behaviour is mobile 
@media (min-width: 63em) { 
    .en { 
     width: calc(48% - 15px); 
     margin-bottom: 0px; 
     margin-right: calc(15px + 2%); 
    } 

    .pt { 
     width: calc(48% - 15px); 
     margin-left: calc(15px + 2%); 
    } 
} 
*/ 

/* the viewport property is here to make sure the device (mobile) won't zoom out too present the desktop version */ 
/* http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972 */ 
@viewport{ 
    zoom: 1.0; 
    width: extend-to-zoom; /* this is to ensure it shows correctly in both landscape and portrait mode */ 
} 

/* Obsessive compulsive behaviour: Nobody touch the borders! */ 
.page { 
    line-height: 1.3rem; 
    margin-top: calc(1.5rem + 1%); 
    margin-bottom: calc(1.5rem + 1%); 
    margin-left: calc(1.5rem + 2%); 
    margin-right: calc(1.5rem + 2%); 
} 

/* MAIN STRUCTURE */ 
/* This is an ID because we only use it once and specifically*/ 
#header { 
    width: 100%; 
    display: inline-block; 
    margin-bottom: 1.3rem; 
} 

#navigation { 
    width: 100%; 
    display: inline-block; 
} 
/* inside the header */ 
#title { 
    float: left; 
    font-size: 1.3rem; 
} 

#meta { 
    float: right; 
} 

.entries { 
    float: left; 
    display: inline-block; 
    width: 100%; 
} 

/* ENTRIES */ 
.entry{ 
    float: left; 
    margin-bottom: 1.3rem; 
} 

.en { 
    float: left; 
    width: 100%; 
    margin-bottom: 10px; 
} 

.pt { 
    float: left; 
    width: 100%; 
    font-style: italic; 
} 

.entry_title{ 
    font-weight: bold; 
} 

.entry_body{ 
} 

.entry_category{ 
} 

.entry_footer{ 
    color: grey; 
} 

sayesinde

Answer 1

:

Eğer bütün CSS ve burada örnek bir HTML kontrol edebilirsiniz yüzdeli, üst öğe üzerinde display: inline-block; belirtmeniz gerekir, böylece bu öğeleri dikkate alırsınız:

Vücut zaten alıyor, ilk soru için, aynı zamandaJS Fiddle

---

: -

.page { 
    line-height: 1.3rem; 
    margin-top: calc(1.5rem + 1%); 
    margin-bottom: calc(1.5rem + 1%); 
    margin-left: calc(1.5rem + 2%); 
    margin-right: calc(1.5rem + 2%); 
    display: inline-block; 
} 

display: inline-block; olmadan (Mavi arka plan tüm alt öğelerin yüksekliğini alır göstermek için eklenmiştir) tam yükseklik (sarı arka plan bedenedir): JS Fiddle