Question

我是离子的新手。我试图在页面上的ion-content标记内设置2个div而不管内容的数量。将高度设置为某个百分比值无效。附加自定义centre类也不会影响div的位置。它们仍然堆叠在一起，只占用所需的空间。

下面是HTML：

<ion-content class="padding tab-dash-content centre">
  <div class="section1 padding centre">
    <h3>Section 1</h2>
    <h5>
      Sub Heading
    </h5>
    <p>
      Some multi Line text
    </p>
  </div>      
  <div class="section2 padding centre">
    <h3>Section 2</h3>        
    <h5>
      Sub Heading
    </h5>
    <p>
      Some multi line text
    </p>
  </div>
</ion-content>

CSS：

.centre { 
    float: none;
    margin-left: auto; 
    margin-right: auto; 
}

.section1,
.section2 {
    border: 2px solid #ffa733;
    height: 50%;
    width: 100%;
}

Answer 1

将height从％更改为vh（vh 视口高度的1/100。）

.centre { 
    float: none;
    margin-left: auto; 
    margin-right: auto; 
}

.section1,
.section2 {
    border: 2px solid #ffa733;
    height: 50vh;
    width: 100%;
    overflow: auto;
}

在离子型应用中无法在离子含量内设置div的高度

1 个答案: