ビューポート測定、cssコードを使用してcssでwidthプロパティを定義する方法を使用していました。
#content {
position: absolute;
background-color: white;
width: 100vw;
top: 115px;
bottom: 30px;
display: table;
z-index: 0;
}
幅を幅から変更したとき:100vw;幅まで:100%;私のコードはもう機能していません。ビューポートが動作しないことを発見したので、パーセンテージ測定に変更したいAndroid <4.4
その他の関連するHTMLおよびcssコード:
HTML
<div id="mainslide">
<section id="aanbod">
<div id="content" align="center">
<table class="tablestyleorchideeaanbod">
<tr>
<td class="titel" width="85%">Orchidee</td>
<td class="beschrijving" width="15%" rowspan="1" align="right">21 aug</td>
</tr>
<tr>
<td class="soort">Cherry red</td>
<td width="15%" rowspan="2" align="right"><svg height="30" width="30">
<circle cx="15" cy="15" r="12" fill="#ff4641" />
</svg></td>
</tr>
<tr>
<td class="beschrijving"><span class="width">Aantal: 100 stuks</span>Grootte: 3 Liter</td>
</tr>
</table>
</div>
</section>
<section>
..............
</section>
<section>
..............
</section>
</div>
CSS
#mainslide {
position: absolute;
left: 100%;
z-index: 1;
}
#aanbod {
position: absolute;
left: 0px;
}
.tablestyleorchideeaanbod {
width: 100%;
padding: 12px;
padding-left: 8%;
padding-right: 8%;
border-bottom-width: 1px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-color: #8cca49;
}
位置をrelative
の代わりにabsolute
にしてから、width:100%
動作するはずです
#mainslide {
position: relative;
left:100%
z-index: 1;
}
#aanbod {
position: relative;
left: 0px;
}
.tablestyleorchideeaanbod {
width: 100%;
padding: 12px;
padding-left: 8%;
padding-right: 8%;
border-bottom-width: 1px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-color: #8cca49;
}
#content {
position: absolute;
background-color: white;
width: 100%;
top: 115px;
bottom: 30px;
display: table;
z-index: 0;
}
実例: http://jsfiddle.net/duvx5qLp/
あなたが何か他のものを探しているなら私に知らせてください:)