内容：.content和.scroll-content

来源：互联网发布：淘宝商品类目大全编辑：程序博客网时间：2024/05/21 12:42

ionic预定义了两个内容容器样式：

.content - 流式定位，内容元素在文档流中按顺序定位
.scroll-content - 绝对定位，内容元素占满整个屏幕

这两种样式都可以使用以下样式进一步确定位置及范围：

.content

<!DOCTYPE html><html><head>    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">    <link rel="stylesheet" type="text/css" href="ionic.min.css"></head><body class="stable-bg">    <div class="bar bar-header">        <h1 class="title">.bar .bar-header</h1>    </div>    <div class="scroll-content has-header balanced-bg light">        <p>This is a demo!</p>        <p>Can you see this line?1</p>      <p>This is a demo!</p>        <p>Can you see this line?2</p>      <p>This is a demo!</p>        <p>Can you see this line?3</p>      <p>This is a demo!</p>        <p>Can you see this line?4</p>      <p>This is a demo!</p>        <p>Can you see this line?5</p>      <p>This is a demo!</p>        <p>Can you see this line?6</p>      <p>This is a demo!</p>        <p>Can you see this line?7</p>      <p>This is a demo!</p>        <p>Can you see this line?8</p>    </div>    <div class="bar bar-footer">        <h1 class="title">.bar .bar-footer</h1>    </div></body></html>

0 0