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 % 높이는 자바 스크립트가없는가요? 착색 한 구획이 진짜 100 %이면, ": after"성분은 반 텍스트뿐만 아니라 정확하게 나타날 것입니다.

이미지 : example

Answer 1

당신은 전체 높이 (COL)에 대한 색상을 설정하는 의미합니까? 이 경우, 제목 position: absolute을 설정

* { 
 
    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

내가 제대로 이해했습니다 바랍니다.

h1은 블록 레벨 요소입니다. Div .appointments은 구조에서 뒤에옵니다. h1의 background-color을 해당 .appointment으로 설정하고 하단 margin을 제거하거나 h1을 appointment에 중첩 할 수 있습니다. 아래 스 니펫에서 설명했듯이.

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>