Skip to content

Instantly share code, notes, and snippets.

Created October 11, 2016 10:38
What would you like to do?
fixed position problem
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>absolute solution</title>
.container {
position: absolute;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
.fixed_part {
position: absolute;
top: 0;
width: 100%;
.fixed_part > input {
box-sizing: border-box;
width: 100%;
padding: 5%;
border: none;
border-bottom: 1px solid #eee;
.overflow_part {
width: 100%;
overflow-y: auto;
.overflow_part .item {
height: 100px;
line-height: 100px;
text-align: center;
border-bottom: 1px solid #eee;
<div class="container">
<div class="fixed_part">
<input type="text" placeholder="输入文字">
<div class="overflow_part">
<div class="item">item_0</div>
<div class="item">item_1</div>
<div class="item">item_2</div>
<div class="item">item_3</div>
<div class="item">item_4</div>
<div class="item">item_5</div>
<div class="item">item_6</div>
<div class="item">item_7</div>
<div class="item">item_8</div>
<div class="item">item_9</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment