css - firefox height does not grow up but works in chrome -
i have 2 display: table-cell
columns. left 1 has button , adds content left column when clicked. , right 1 has text box should grow height height of left column. so, gave fixed height value right column: #step-right { height: 10px; }
.
this works fine in chrome still having issue in firefox. found firefox have issue regarding height: 100%
not same problem. want solve using no js tricks.
any appreciated. thanks
function step() { var stepleft = document.getelementbyid('step-left'); stepleft.innerhtml = 'step <br/>' + stepleft.innerhtml; }
* { box-sizing: border-box; } .step-content { display: table; background-color: blue; } .step-bar { display: table-cell; height: 100%; } #step-left { background-color: yellow; } #step-right { height: 10px; background-color: green; } .input-group { height: 95%; display: table; } .input-group textarea { height: 100%; }
<div class="steps"> <div class="step"> <div class="step-content"> <div class="step-bar" id="step-left"> <button type="button" onclick="step()">step</button> </div> <div class="step-bar" id="step-right"> <span class="input-group"> <textarea></textarea> </span> </div> </div> </div> </div>
Comments
Post a Comment