CSSボディと他のdivはフルハイトを使用していません

Question

CSS + HTMLを使用して簡単なウェブサイトをいくつか作成しました。このウェブサイトで

、私はdiv要素のシリーズをカスケード接続している。..

• 体
  • ページ
    • エントリ
      • エントリ

ので、私は、他のすべてのdivを囲むように（1）本体とページの両方を期待し、そしてより重要なこと（2）本体と、ページの高さは、すべての子の少なくとも合計にまたがりますdivs ..しかし、これは起こりません。私の希望する行動に影響を与えます。

私の質問はなぜ1と2が起こっているのですか？ CSSはカスケーディングスタイルシートを意味するので、私はカスケードをより明示的にすることを期待していました。ほとんどの場合、私は何か間違ったことをやっている..：

あなたはここに全体のCSSとサンプルHTMLを確認することができます。

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

おかげ

Answer 1

子要素がされているため浮動小数点数の場合、親divにdisplay: inline-block;を指定する必要があります。

体が既に取っている、あなたの最初の質問のために、またJS 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;なし（ブルーの背景には、それはすべての子要素の高さを取る表示するために追加されました）完全な高さ（黄色の背景は身体）：JS Fiddle