CSS 100% height not working with a custom tag

Question

I have html and body set to 100% and same with loading-view but loading view doesn't have 100% height.

body {
    position: relative;
    min-height: 98%;
    width: 98%;
    display: table;
}
html {
    height: 100%;
}
@font-face{

font-family:CaviarDreamsBold;
 src:url('CaviarDreamsBold.ttf');

}
/*
**** Circular Selection ****
*/

.CircularSelectionView {
    display: block;
    position: relative;
}
.CircularSelectionObject {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
}
.CircularObjectIcon {
    width: 100%;
    height: 75%;
}
.CircularObjectTitle {
    width: 100%;
    height: 20%;
    text-align: center;
    color: black;
}
/*
**** Loading ****
*/

loading-view {
    display: block;
    width: 100%;
    height: 100%;
}
loading-content {
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.loaderAnimator {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    overflow: hidden;
    font-family: "Arial", sans-serif;
}
.wordElement {
    position: absolute;
    padding: 12px;
    background-color: #d9975e;
    color: white;
    text-align: center;
    font-size: 18pt;
    border-radius: 12px;
}
/*
**** Tab View ****
*/

tab-view {
    display: table;
}
tab-bar {
    display: table-row;
    width: 100%;
    height: 36px;
}
.tabBarButton {
    height: 100%;
    float: left;
    background-color: white;
    color: #999999;
    border-radius: 6px;
    margin: 5px 0px;
    padding: 3px 0px;
    text-align: center;
    font-family: CaviarDreamsBold, "Arial", sans-serif;
    /*-webkit-transition: background-color 1.0s linear;
    -moz-transition: background-color 1.0s linear;
    -o-transition: background-color 1.0s linear;
    -ms-transition: background-color 1.0s linear;
    transition: background-color 1.0s linear;
    -webkit-transition: all 1.0s linear;
    -moz-transition: color 1.0s linear;
    -o-transition: color 1.0s linear;
    -ms-transition: color 1.0s linear;
    transition: color 1.0s linear;*/
}
tab-content {
    display: table-row;
    width: 100%;
}
tab-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
} 

html

    <!---->

    <loading-view>
        <loading-content>
            <tool-bar></tool-bar>

            <tab-view id="tabView">
                <tab-bar></tab-bar>

                <tab-content>
                    <!-- First tab-content will show on page load -->
                    <tab-item data-title="Meat Pizzas">
                        <circular-view id="exampleView" data-object-class="exampleObject" data-autoloop-interval="1000 ">
                            <circular-object data-icon="Resources/ExamplePizza.png">0</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">1</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">2</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">3</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">4</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">5</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">6</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">7</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">8</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">9</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">10</circular-object>
                            <!-- Last object in the list is the
                first to be featured on page load -->
                        </circular-view>
                    </tab-item>

                    <tab-item data-title="Second Thing">
                        <div style="width:100%; height:100%; background-color:gray;">
                            View 2
                        </div>
                    </tab-item>

                    <tab-item data-title="Third Thing">
                        <div style="width:100%; height:100%; background-color:lightgray;">
                            View 3
                        </div>
                    </tab-item>
                </tab-content>


            </tab-view>


        </loading-content>
    </loading-view>

</body>

Answer 1

Your custom element has 100% height of <body>, but you need to make <body> 100% height of <html>.

The problems with your

body {
    min-height: 98%;
    display: table;
}

are that

• min-height has no effect in tables.
• percentage height only works if parent has a explicitly specified height (i.e., it doesn't depend on content height), which is not the case with min-height.

Then, you must use

body {
    height: 98%;
}

instead of the code above.