Home/ Questions/Q 7954729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:31:08+00:00

I have tried to create a jsFiddle of this, but it doesn’t work to

  • 0

I have tried to create a jsFiddle of this, but it doesn’t work to reproduce my problem. The Problem is that when I open the following page in webkit (Chrome on XP, or Safari on iOS), the 3rd (blue) div is off the bottom of the page, when what I want is it to be at the bottom.

I am aware that I have some unecessary style applied; that is because I have simplified it as much as I can from a page where I need those attributes set, and removing stops the problem being reproduced.

Page code is:

<html>
  <head>
    <style type="text/css">
      body {
        margin: 0;
      }
      .A {
        background: red;
        float: left;
        -webkit-transform-style: preserve-3d;
      }
      .B {
        background: green;
        height: 100%;
      }
      .C {
        background: blue;
        position: fixed;
        bottom: 0px;
      }
    </style>
  </head>
  <body>
    <div class="A">
      1
      <div class="B">
        2
      </div>
      <div class="C">
        3
      </div>
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Move your height: 100% from .B to .A

    The problem is that your containing element (div A) has no height defined, so will auto size to fit it’s content. div B is nested inside that and has a 100% height defined, so div A will be 100% + div C, causing div C to go off the bottom of the screen.

    • 0