Home/ Questions/Q 8592973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:52:48+00:00

Right now I have a website which has an overall height set at 750px.

  • 0

Right now I have a website which has an overall height set at 750px. I have it vertically centered using the position absolute and negative margin method. It works great apart from one problem.

If I try use it on a lower-res monitor or mobile device it cuts the top of the page.

Here is my code

HTML

<body>
<div class="content">
CONTENT IS HERE
</div>
</body>

CSS

.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px; /* Half of 750px */
}

I tried using overflow:scroll; on the body tag but I understand that it doesn’t work, I didn’t expect it to. I am totally stumped! Is there any suggestion?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can overwrite it with a mediaquery on small screens:

    .content {
    position:absolute;
    top:50%;
    height:750px;
    margin-top:-375px;
}
@media only screen and (max-height: 750px){
    .content {
        top:0;
        margin-top:0;
    }
}

    Actually, this is a graceful degradation method, but if you’re designing for mobile you probably want to approach in a progressive enhancement way. In that case, it becomes:

    .content {
    height:750px;
}
@media only screen and (min-height: 751px){
    .content {
        position:absolute;
        top:50%;
        margin-top:-375px;
    }
}

    Speaking about compatibility, the only keyword after @media prevent older browsers from rendering the rules contained.

    To reach (almost) full compatibility, you can use this very useful plugin: respond.js

    • 0