CSSはdivから100％得られ、ページ全体ではありません

Question

CSSでcalcを使って何かを計算しようとしています。数時間後、私の実際のdivは間違った100％の数字を与えることが分かりました。ここ

が小さい例である：

html, body, .calender { 
 
\t position: relative; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
.appointmentsA { 
 
\t background: blue; 
 
} 
 

 
.appointmentsB { 
 
\t background: red; 
 
} 
 

 
.calender { 
 
\t display: table; 
 
\t width: 100%; 
 
\t table-layout: fixed; 
 
\t padding: 10px 10px 0 10px; 
 
} 
 
.calender .row { 
 
\t display: table-cell; 
 
\t padding: 0 10px; 
 
} 
 

 
.appointments { 
 
\t height: 100%; 
 
} 
 

 
.appointments:before { 
 
\t \t \t content: "test"; 
 
\t \t \t position: absolute; 
 
\t \t \t top: calc(100% - 18px); 
 
\t \t \t color: #fff; 
 
\t \t }

<main class="calender"> 
 
\t <div class="row"> 
 
\t \t <h1 class="title">ABC</h1> 
 
\t \t <div class="appointments appointmentsA"></div> 
 
\t </div> 
 
\t <div class="row"> 
 
\t \t <h1 class="title">DEF</h1> 
 
\t \t <div class="appointments appointmentsB"></div> 
 
\t </div> 
 
</main>

赤と青のブロックが容器rowとメイン親と同じ高さを有します。

色付きブロックの高さを100％にするJavaScriptはありませんか？ 着色されたブロックが実際の100％を持つ場合、 "：after"要素はハーフテキストだけでなく正しく表示されます。

画像：example

Answer 1

あなたはフルハイトCOLの色を設定することを意味しますか？

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body, 
 
.calender { 
 
    position: relative; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.appointmentsA { 
 
    background: blue; 
 
} 
 

 
.appointmentsB { 
 
    background: red; 
 
} 
 

 
.calender { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    padding: 10px 10px 0 10px; 
 
} 
 

 
.calender .row { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
} 
 

 
.appointments { 
 
    height: 100%; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
}

<main class="calender"> 
 
    <div class="row"> 
 
    <h1 class="title">ABC</h1> 
 
    <div class="appointments appointmentsA"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <h1 class="title">DEF</h1> 
 
    <div class="appointments appointmentsB"></div> 
 
    </div> 
 
</main>

または着色のdivのために：私は私が正しくあなたを理解してきました願っています

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body, 
 
.calender { 
 
    position: relative; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.appointmentsA { 
 
    background: blue; 
 
} 
 

 
.appointmentsB { 
 
    background: red; 
 
} 
 

 
.calender { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    padding: 10px 10px 0 10px; 
 
} 
 

 
.calender .row { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
    position: relative; 
 
} 
 

 
.appointments { 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.title { 
 
    position: relative; 
 
    z-index: 2; 
 
}

<main class="calender"> 
 
    <div class="row"> 
 
    <h1 class="title">ABC</h1> 
 
    <div class="appointments appointmentsA"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <h1 class="title">DEF</h1> 
 
    <div class="appointments appointmentsB"></div> 
 
    </div> 
 
</main>

Answer 2

それがある場合は、タイトルのためposition: absoluteを設定します。

h1は、ブロックレベルの要素です。 div .appointmentsは、あなたの構造内にあります。 h1のbackground-colorを対応する.appointmentに設定し、下のmarginを削除するか、appointmentの中にh1を入れ子にすることができます。以下のスニペットで行っています。

html, 
 
body, 
 
.calender { 
 
    position: relative; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.appointmentsA { 
 
    background: blue; 
 
} 
 

 
.appointmentsB { 
 
    background: red; 
 
} 
 

 
.calender { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    padding: 10px 10px 0 10px; 
 
} 
 

 
.calender .row { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
} 
 

 
.appointments { 
 
    height: 100%; 
 
}

<main class="calender"> 
 
    <div class="row"> 
 
    <div class="appointments appointmentsA"> 
 
     <h1 class="title">ABC</h1> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="appointments appointmentsB"> 
 
     <h1 class="title">DEF</h1> 
 
    </div> 
 
    </div> 
 
</main>