CSS 100％高度无法使用自定义标记

Question

我将html和body设置为100％，与loading-view相同，但加载视图的高度不是100％。

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

您的自定义元素的高度为<body>的100％，但您需要<body> <html>的高度为100％。

你的问题

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

就是那个

• min-height对表格无效。
• 百分比height仅在父级具有明确指定的height时才有效（即，它不依赖于内容高度），而min-height则不然。< / LI>

然后，你必须使用

body {
    height: 98%;
}

而不是上面的代码。