Created
October 11, 2016 10:18
-
-
Save zymiboxpay/1e0a620284d1cf320f5f9603779a728d to your computer and use it in GitHub Desktop.
fixed position problem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<title>fixed problem</title> | |
<style> | |
.container { | |
position: relative; | |
} | |
.fixed_part { | |
position: fixed; | |
top: 0; | |
width: 100%; | |
} | |
.fixed_part > input { | |
width: 100%; | |
padding: 5%; | |
border: none; | |
border-bottom: 1px solid #eee; | |
} | |
.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