Html css中的百分比宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28559305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
percentage width in css not working
提问by Kevin Ammerlaan
I was using a way to define my width property in css with the viewport measurement, css code:
我正在使用一种方法在 css 中定义我的宽度属性，并使用视口测量，css 代码：
#content {
position: absolute;
background-color: white;
width: 100vw;
top: 115px;
bottom: 30px;
display: table;
z-index: 0;
}
When I changed the width from width: 100vw; to width: 100%; my code ain't working anymore. I want to change to percentage measurement since I discovered viewport will not work on Android < 4.4
当我从 width: 100vw 改变宽度时；到宽度：100%；我的代码不再工作了。我想更改为百分比测量，因为我发现视口在 Android < 4.4 上不起作用
Other related HTML and css code:
其他相关的 HTML 和 css 代码：
HTML
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
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;
}
采纳答案by Mohit Bhasi
Make the positions relativeinstead of absolute, then width:100%should work
使位置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;
}
Working example: http://jsfiddle.net/duvx5qLp/
工作示例：http: //jsfiddle.net/duvx5qLp/
Let me know if you are looking for something else :)
如果您正在寻找其他东西，请告诉我:)
