[英]Unable to set height of a div inside ion-content in ionic based application
I am a newbie to ionic. 我是离子的新手。 I am trying to centre 2 divs regardless of the amount of content, inside an
ion-content
tag on a page. 我试图将2个div居中放置,而不考虑页面上
ion-content
标签内的ion-content
。 Setting height to some percentage value is not working. 将高度设置为某个百分比值不起作用。 Attaching a custom
centre
class is also not affecting the position of the divs. 附加自定义
centre
类也不会影响div的位置。 They are still stacked on top of each other taking only the space required. 它们仍然堆叠在一起,仅占用所需的空间。
Below is HTML: 以下是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>
The CSS: CSS:
.centre {
float: none;
margin-left: auto;
margin-right: auto;
}
.section1,
.section2 {
border: 2px solid #ffa733;
height: 50%;
width: 100%;
}
Change the height
from % to vh (vh 1/100th of the height of the viewport.) 将
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.