Question

当核心动画页面在各部分之间切换时，如何使（红色）DIV自动调整其高度？（高度应与部分相匹配）是否可以使用Polymer垂直布局属性？这是Plunker example。

<style> 
div#wrapper {
    border: 2px solid;
    padding: 10px 40px; 
    resize: both;
    overflow: auto;
    height:100%;

}

div.container {

}
</style>

<body unresolved>

<template is="auto-binding" id="t" >


Start
<br><br>

<div  id="wrapper" style="background:red;">

        <core-animated-pages 
                            id="core_animated_pages_1"
                            selected="one" 
                            valueattr="hash_1"
                            transitions="slide-from-right">

            <section hash_1="one" >
                <div class="container">

                    <h3 hash_1="five" on-click="{{handleClick_1}}">
                        Click to Switch to option:five(from inside the animated page)
                    </h3>
                    <br><br>
                        This line should be visible.
                    <br><br>

                </div>    
            </section>


            <section hash_1="five">
                <div class="container">

                    <h3  hash_1="one" on-click="{{handleClick_1}}">
                       Back to option one(from inside the animated page)
                    </h3>

                    <br><br>
                    1
                    <br><br>
                    2
                    <br><br>
                    3
                    <br><br>
                    4
                    <br><br>
                    5
                    <br><br>

                </div>
            </section>

        </core-animated-pages>


    </div>          


  <br><br>
  End
  <br><br>

</template>

Answer 1

Setting the height of core-pages elements?

将此样式添加到以下部分：

<section style="position: relative; display: block;">
         <div label="">One</div>
</section>

 //or using layout attributes
<section relative block>
         <div label="">One</div>
</section>

当核心动画页面在各部分之间切换时，如何使DIV自动调整其高度？

1 个答案: