如何创建一个完全灵活的钢琴键盘与HTML和CSS

Question

我想创建一个钢琴键盘，将保持它的元素比例使用弹性盒，但似乎无法使黑色笔记保持相同的宽度或高度一旦我开始改变窗口大小。

这里是一个fiddle

body{ 
width: 800px; 
height: 200px; 
display: flex; 
} 

#kbd { 

padding: 1%; 
flex-flow: column; 
display: flex; 
flex: 4; 
} 

#keys { 
display: flex; 
flex: 8; 
justify-content: center; 
} 


.note { 
flex: 1; 
display: inline-flex; 
align-items: center; 
} 

.black { 
justify-content: center; 
position: absolute; 
height: 45%; 
background-color: #474747; 
color: white; 
width: 8%; 
margin: 0 -4%; 
} 

.white { 
flex-flow: column; 
justify-content: flex-end; 
outline: 2px solid #474747; 
color: #474747; 
background-color: #ffffff; 
padding-bottom: 1%; 
} 

Answer 1

百分比高度是基于所述第一定位的父的高度来计算。在这种情况下，#keys和#kbd div没有position CSS规则。这意味着黑键是根据身体的宽度而不是其直接父母缩放的。

将position: relative;加到#keys div以使其正常工作。

Answer 2

该位置应该是相对而非绝对的。 你也应该设置包含div的高度为100％。

参考小提琴链接： http://jsfiddle.net/924sefae/6/

#kbd { 
    height: 100%; 
    ... 
} 
#kbd { 
    height: 100%; 
    ... 
} 

.black { 
    position: relative; 
    ... 
}