Beiträge von ZacharySilas

  • Position fixed und sticky in ie11?

    Hello,

    I have the following problem, which I hope someone can help me with.

    First of all, the solution must be IE11 compatible.


    I have divs in tabular form, the head should be position fixed.

    Then I fill the "table" with JS.

    My problem now is that https://speedtest.vet/ https://vidmate.bid/ https://wordtopdf.ltd/ the width of the header elements is lost as soon as I set position fixed.

    You could now set position sticky in other browsers, but this is not supported in the ie11.


    Here as a code, is probably more understandable.

    HTML

    1. <! DOCTYPE html>
    2. <html lang = "en">
    3. <head>
    4. <meta charset = "UTF-8">
    5. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
    6. <meta http-equiv = "X-UA-Compatible" content = "ie = edge">
    7. <title> Document </title>
    8. <style>
    9. html, body {
    10. width: 100%;
    11. display: table;
    12. font-family: Arial, Helvetica, sans-serif;
    13. font-size: 12;
    14. }
    15. .head {
    16. font: bold;
    17. display: table-row;
    18. height: 20px;
    19. }
    20. .head> div {
    21. display: table-cell;
    22. padding: 2px;
    23. border: 1px solid yellow;
    24. }
    25. .data {
    26. display: table-row;
    27. margin-top: 20px;
    28. }
    29. .data> div {
    30. display: table-cell;
    31. border: 1px solid black;
    32. }
    33. .fixed {
    34. position: fixed;
    35. right: 0px;
    36. left: 0px;
    37. top: 0;
    38. }
    40. </style>
    41. </head>
    42. <body>
    43. <div class = "head fixed">
    44. <div> th1 </div>
    45. <div> th2 </div>
    46. <div> th3 </div>
    47. <div> th4 </div>
    48. </div>
    49. <! - The data part normally only arises with js and is only used for illustration ->
    50. <div class = "data">
    51. <div> Lorem ipsum dolor sit amet, conseteturasd gubergren, no sea takimata sanctus est Lorem ipsum do </div>
    52. <div> und labore et dolore magna aliquyam erat, sed diam vo </div>
    53. <div> ed diam nonumy eirmod temporally invidluptua. At vero eos et accusam et justo duo dolores et ea reb </div>
    54. <div> sadipscing elitr, sum. Always clita k </div>
    55. </div>
    56. </body>
    57. </html>

    Show all

    In the end, the data part naturally contains so much data that the page is scrollable.

    Does anyone have any solutions?