Is there any more elegant way for mobile web to display content above the phone's keyboard?

position:fixed;bottom: 0; perfect solution

. It took me a long time to use height:100%;display:flex; align-self:end ,

found a position:fixed;bottom: 0; perfect solution

I solved

using height:100%;display:flex; align-self:end;
*{
    margin:0;
    padding:0;
}

html,body{
    height: 100%;
}

.rowFlex {
    display: flex;
    flex-direction: row;
}

.colFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

<div id="app" class="colFlex" style="width: 100%;height: 100%">
    <div class="rowFlex" style="width: 100%;height: 100%" >
        <input type="text" style="height: 10px">
        <div style="align-self: flex-end;background: red;">123</div>
    </div>
</div>

try scrollIntoViewIfNeeded and scrollIntoView .

Menu