Member Avatar for asif49

Hi,

I'm developing a new website and wanted this to fit all screen resolutions type, so intuitively thought that eliminating the use of 'px' totally and using '%' to define dimensions would be better. Is this the right way to achieve what I'm trying to achieve?

The strangest thing I noticed whilst doing this was that by doing setting the height to 100% in the body { .. } section it starts showing the scrollbar even when the entire page is empty and that is the only styling which has been defined. What I'm aiming to achieve should make the height 100% mean the bottom of my screen and width 100% the width of it, so the scrollbar shouldn't be showing in this case.

Perhaps I'm thinking about it the wrong way and maybe javascript is needed to aide me in this. Can someone help?

  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

’s symptom (an empty page showing a scrollbar when using percent-based sizing) is common and usually comes down to two CSS quirks that are easy to miss. was right to check defaults, but there are a couple of deeper reasons why the layout behaves oddly.

Percent heights are resolved against the containing block’s computed height, so a percent height only works reliably when the parent chain has a defined height. A separate, often surprising rule is that percentage values for vertical margins/padding are computed from the container’s width, not its height — that explains why margin-top:44% can produce unexpected vertical movement and trigger scrolling. See MDN for details on how height is computed and how margin percentages work: MDN: height and MDN: margin.

Practical, more robust approaches:

  • Use viewport units or flexbox/grid instead of pushing elements with large percentage offsets. This keeps flow and avoids guessing percentages.
  • Anchor an element to the viewport when it must sit at the bottom-right; that avoids parent-size dependencies.

Example patterns (new approach, not shown above):

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.anchor {
  margin-left: auto;
  margin-top: auto;
  padding: 1rem;
}
.anchor {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

Cautions and troubleshooting tips: test on real devices because 100vh can behave differently on mobile browsers (address bar chrome). Inspect computed sizes in DevTools, check box-sizing, and watch for subpixel rounding or element padding that pushes content past the viewport. For complex, cross-device UI, responsive layout primitives (flexbox/grid + media queries) are safer than positioning by ad-hoc percentages. For more on viewport units and mobile quirks, see MDN: viewport-percentage lengths.

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

Have you set margin, padding and border to 0? If you set the height/widht to 100% and have padding/margin the scroll will show.

This kind of stuff is very trick and browser compability doesn't help either.

I had the need to do a very sofisticated interface fit in a large number of screens, my solution was the use of a layout plugin: http://layout.jquery-dev.net/

Member Avatar for asif49

Yes I have that stuff set to 0. It seems like for me margin-left: 97% and margin-top: 44% is where the element I want to place (some text) is to the far right of the screen at the bottom. If I increase either of these anymore then the scroll shows. My aim is to have the non-scroll page on all devices be used to put data on so I'm trying to create a div for this purpose however it seems very strange that these are the amounts which determine the entire page's width/height.

Member Avatar for AleMonteiro

If the page will never have scroll, set overflow: hidden.

If you describe how the interface should look like, or, even better, post a example of the layout we can suggest better ideas.

Edited by AleMonteiro
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.