html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="tx">
:
:;
:;
:;
:;
:"" ;;
:
:
:
:
:
:
:
:"" ;;
:;
:c"" ;;
</div>
<input type="text" class="in" placeholder="" id="in">
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>css:
body {
font-size: 12px;
}
.in {
position: absolute;
bottom: 0;
left: 5%;
width: 90%;
height: 2rem;
border-radius: 4px;
padding: .5rem;
box-sizing: border-box;
border: 1px solid gray;
}
.tx {
font-size: 1rem;
border: 1px solid green;
}
.wrapper {
position: relative;
border: 1px solid red;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 10px;
box-sizing: border-box;
height: 540px;
}
* {
margin: 0;
padding: 0;
} .wrapper width is fixed, input is relative to .wrapper , but scrolls with the scrolling of .tx and is not fixed at the bottom of .wrapper . Why?
effect:
initial interface:
.wrapper:
the ideal effect should not be input always fixed at the bottom of .wrapper ?