Advertisement
Guest User

Fixed divs can breakreading when paging

a guest
Sep 12th, 2013
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.31 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="so">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="description" content="Notice how that when paging with space bar or page up/down, text gets obscured behind the fixed element, making it difficult to read.  You have to resort to using the arrows or scroll bars to read the text" />
  6.  
  7. <title>Fixed divs can break reading when paging</title>
  8.  
  9. <style>
  10. #fixed-div {
  11.     position: fixed;
  12.     height: 10em;
  13. }
  14. #main-content {
  15.     position: relative;
  16.     top: 11em;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21.  
  22. <div id="fixed-div">
  23. <h1>Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus</h1>
  24. </div>
  25.  
  26. <div id="main-content">
  27.  
  28. <a href ="https://news.ycombinator.com/item?id=6373215">See context on HN</a>
  29.  
  30. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  31.  
  32. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  33.  
  34. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  35.  
  36. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  37.  
  38. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  39.  
  40. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  41.  
  42. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  43.  
  44. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  45.  
  46. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  47.  
  48. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  49. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  50.  
  51. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  52.  
  53. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  54.  
  55. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  56.  
  57. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  58.  
  59. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  60.  
  61. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  62.  
  63. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  64.  
  65. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  66.  
  67. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  68. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  69.  
  70. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  71.  
  72. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  73.  
  74. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  75.  
  76. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  77.  
  78. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  79.  
  80. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  81.  
  82. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  83.  
  84. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  85.  
  86. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  87. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  88.  
  89. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  90.  
  91. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  92.  
  93. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  94.  
  95. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  96.  
  97. Dicta enim et quas saepe. Magni eum quidem blanditiis modi labore quia vero. Aliquid debitis minima quo at. Dolorum impedit sit consequatur molestiae. Saepe sit nihil non fuga neque animi omnis. Est esse voluptates voluptas sint sed voluptatem est blanditiis.
  98.  
  99. Architecto sunt consequatur quos maiores delectus ut. Itaque perspiciatis minus similique accusantium voluptatem sint nihil. In modi nesciunt et sequi occaecati quo dignissimos dolor.
  100.  
  101. Voluptatum magni quis autem velit. Expedita cumque cupiditate et aut. Sit possimus omnis consequatur et enim corporis. Modi tenetur autem expedita. Assumenda incidunt qui sit sit error sed placeat aliquid. Quia molestiae sed est natus quisquam in.
  102.  
  103. Cumque ullam inventore exercitationem molestiae quo enim ut. Commodi mollitia inventore dignissimos sint laudantium dicta consectetur nihil. Omnis laboriosam reiciendis iure.
  104.  
  105. Cupiditate voluptas dolores adipisci. Recusandae illo necessitatibus quod. Rerum praesentium saepe cupiditate cum. Possimus totam adipisci accusamus et voluptatem et ullam autem.
  106.  
  107.  
  108. </div>
  109.  
  110. </body>
  111. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement