我正在尝试将%应用于我的身高,但我不能。相反,div只接受px,有人知道我做错了什么?
.left-bar{
height:200px;
//如果我使用px工作正常,但如果我使用%不起作用
的CSS:
html,
body {
height: 100%;
width: 100%;
overflow-y: hidden;
border:1px dashed gray;
}
.left-bar{
height:200px; // why I cannot use % for my height?
width:30%;
border:1px solid green;
overflow-y:scroll;
}
HTML:
<div class="container-fluid">
<div class="md-col-12">
header
</div>
<div class="col-md-12">
<div class="left-bar">
<p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p>
</div>
</div>
<div class="col-md-12">
footer
</div>
</div>
jsfiddle:https://jsfiddle.net/q7kjm9pn/1/
我试过这样做: Percentage Height HTML 5/CSS
不重复 不重复见: 编辑:https://jsfiddle.net/q7kjm9pn/5/