Skip to content

Instantly share code, notes, and snippets.

@zymiboxpay

zymiboxpay/solution case

Created October 11, 2016 10:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zymiboxpay/de6885576848a072b776c51acc556737 to your computer and use it in GitHub Desktop.
Save zymiboxpay/de6885576848a072b776c51acc556737 to your computer and use it in GitHub Desktop.
Download ZIP
fixed position problem
Raw
solution case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>absolute solution</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed_part">
<input type="text" placeholder="输入文字">
</div>
<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>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment