position fixed is not working

you need to give width explicitly to header and footer

width: 100%;

Working fiddle

If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.

Related Posts:

  1. How to make a monopoly board using css grid?
  2. Half circle with CSS (border, outline only)
  3. How to horizontally center an element
  4. Unblur content inside blurring background div
  5. Setting table column width
  6. How to set a border for an HTML div tag
  7. Setting table column width
  8. What is difference between png8 and png24
  9. Why does z-index not work?
  10. How to center an iframe horizontally?
  11. Creating a nav bar with flexbox
  12. Is element block level or inline level?
  13. How to line-break from css, without using
    ?
  14. How to put img inline with text
  15. How to center a “position: absolute” element
  16. How do I make an image smaller with CSS?
  17. Two divs side by side – Fluid display
  18. What is sr-only in Bootstrap 3?
  19. FontAwesome icons are not showing, Why?
  20. Remove border from IFrame
  21. How to change text transparency in HTML/CSS?
  22. CSS horizontal scroll
  23. Bootstrap 4 images thumbnail classes
  24. How do I set a background-color for the width of text, not the width of the entire element, using CSS?
  25. AngularJS ngClass conditional
  26. How to darken a background using CSS?
  27. text-overflow: ellipsis not working
  28. How to reference nested classes with css?
  29. Placing border inside of div and not on its edge
  30. Why is there an unexplainable gap between these inline-block div elements?
  31. How to apply CSS to iframe?
  32. How to display and hide a div with CSS?
  33. Draw a line in a div
  34. CSS centred header image
  35. Change Color of Fonts in DIV (CSS)
  36. Why is “cursor:pointer” effect in CSS not working
  37. How to move text up using CSS when nothing is working
  38. How to style input and submit button with CSS?
  39. How to align content of a div to the bottom
  40. How to outline text in HTML / CSS
  41. Complete list of reasons why a css file might not be working
  42. How to draw a dotted line with css?
  43. Brackets – Live Preview not working
  44. How to stick text to the bottom of the page?
  45. How to make blinking/flashing text with CSS 3
  46. HTML iframe – disable scroll
  47. CSS set li indent
  48. Why does this CSS margin-top style not work?
  49. How to center content in a Bootstrap column?
  50. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  51. Why doesn’t height: 100% work to expand divs to the screen height?
  52. How can I position my div at the bottom of its container?
  53. Why doesn’t height: 100% work to expand divs to the screen height?
  54. How can I position my div at the bottom of its container?
  55. How do I install a custom font on an HTML site
  56. How to overlay one div over another div
  57. How to align an input tag to the center without specifying the width?
  58. How can I embed video for discord directly from website?
  59. Why would max-width not work on this?
  60. Basic CSS – how to overlay a DIV with semi-transparent DIV on top
  61. difference between width auto and width 100 percent
  62. Making text background transparent but not text itself
  63. How to show text on image when hovering?
  64. Square brackets in CSS
  65. How do I disable form fields using CSS?
  66. Place input box at the center of div
  67. Fit background image to div
  68. Table scroll with HTML and CSS
  69. Set cellpadding and cellspacing in CSS?
  70. how to do a line break in Bootstrap 3.3.7
  71. CSS content property: is it possible to insert HTML instead of Text?
  72. Vertical align not working on inline-block
  73. How to increase height of textarea using bootstrap rows and columns
  74. Indent List in HTML and CSS
  75. Bootstrap 3 Glyphicons CDN
  76. Absolute position is not working
  77. Position absolute but relative to parent
  78. How do you specify table padding in CSS? ( table, not cell padding )
  79. Is it possible to put CSS @media rules inline?
  80. Make padding responsive
  81. Two Divs next to each other, that then stack with responsive change
  82. Vertically align text next to an image?
  83. SVG drop shadow using css3
  84. Force table column widths to always be fixed regardless of contents
  85. HTML not loading CSS file
  86. How can I center my ul li list in css?
  87. Is it possible to use css to shrink text to automatically fit the size of the div
  88. CSS !important not working
  89. How to best set a CSS3 transition to none?
  90. Why is vertical-align: middle not working on my span or div?
  91. ow to change the style of the title attribute inside an anchor tag?
  92. Flex align-items: center not centering items
  93. Create a slanted edge to a div [duplicate]
  94. How can I align text directly beneath an image?
  95. how do I get the bullet points of a

Leave a Comment