Home/ Questions/Q 9089723
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:12:38+00:00

I’m trying to design a single page website (without a vertical & a horizontal

  • 0

I’m trying to design a single page website (without a vertical & a horizontal scroll). Now my structure is:

container-->height: 100%
   header-->height: 10%
   main-content-->height: 80%
   footer-->height: 10%

The page appears exactly what I want in Mozilla Firefox.
However, in Chrome a black space (about 1-2px) appears between the footer bottom and the browser bottom.
In Safari, a vertical scroller appears on the right.

I’m working on windows and have not applied any margin/padding{top or bottom} to any of the elements.

EDIT#1

I’m also using a slider in the main-content for which I had to specify fixed height for some divs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The possible reason to why you get black space at bottom or a scrollbar is the way browsers work with percentages calculations. You can find an explanation Here.

    The trick will be to define #footer outside of container and set

    #footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 9%;
    }

    And also set height of #header to 9% to allow for contingency in calculation.

    • 0