CODEWITHSUNDEEP
htmlcssfixed
Velketor
Velketor

Reputation: 11

Fix content to the top of a page

I've got content that stays fixed to the top of the page when viewed at 711px wide:

Click here to see the content fixed to the top of the page.

...but when I shrink the width of the browser to 397px wide, the content is pushed down into the center of the page as it scales proportionally:

Click here to see the content move to the center of the page as it scales proportionally.

How can I keep my content AT THE TOP OF THE PAGE while it continues to scale proportionally?

Here is the code I'm using to format my HTML:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Swiffy Output</title>
  <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.4/runtime.js"></script>
  <script>
    swiffyobject = {
        "as3": true,
        "frameRate": 24,
        "frameCount": 109,
        "backgroundColor": -1,
        "frameSize": {
          "ymin": 0,
          "xmin": 0,
          "ymax": 14000,
          "xmax": 20000
        },
        "fileSize": 146782,
        "v": "7.4.1"
  </script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body style="margin: 0; overflow: hidden;">
  <div id="swiffycontainer" style="width: 100%; height: 100%">

  </div>
  <script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
      swiffyobject, {});

    stage.start();
  </script>
</body>

</html>

Upvotes: 0

Views: 1620

Answers (2)

Bozidar Sikanjic
Bozidar Sikanjic

Reputation: 747

html, body, #swiffycontainer {margin-top: 0; padding-top:0;}

Explanation: I would add this css to prevent browser predefined values, which browsers use in case it's not defined (like margin-top:8px for in Chrome etc.)

Upvotes: 0

aphextwix
aphextwix

Reputation: 1876

Add this to your CSS : 

#swiffycontainer {
  position: fixed;
  top: 0;
  left: 0;
}

Here's an example JsFiddle

You can see that the red block stays fixed the top of the container, no matter where you scroll in the viewport.

Upvotes: 1

Related Questions