1

在此处输入图像描述我将 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>
4

1 回答 1

1

您的自定义元素具有 100% 的高度<body>，但您需要将<body>100% 的高度设为<html>。

你的问题

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

那是

  • min-height在表格中没有效果。
  • height只有在 parent 明确指定height（即它不依赖于内容高度）时，百分比才有效，而min-height.

然后，您必须使用

body {
    height: 98%;
}

而不是上面的代码。

于 2014-03-23T19:40:43.780 回答