#41486 closed defect (bug) (wontfix)
Admin html element is not full-height
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Priority: | normal | |
| Severity: | normal | Version: | |
| Component: | Administration | Keywords: | has-screenshots |
| Focuses: | ui | Cc: |
Description
The <html> tag within /wp-admin/ has the following CSS property: height: 100%;.
This means that the current screen height is taken rather than actual page height.
When you scroll down you can see that the absolute bottom of the html and body objects are cut short:
The solution would be to remove the height: 100% CSS rule from html.
body { height: 100% } is fine.
Applications that want to make use of the page height can't calculate their position correctly through CSS and therefore they require JavaScript or other hacks (e.g. absolute positioning modals).
Change History (4)
#2
@
7 years ago
- Focuses administration removed
- Keywords has-screenshots reporter-feedback added
- Version trunk deleted
#3
@
7 years ago
- Keywords close added; reporter-feedback removed
- Resolution set to wontfix
- Status changed from new to closed
@afercia Aha! I now see its intentions. Thanks for alleviating that.
I was trying to add a no-scroll mask behind the modal, which required the complete stretch of the page.
Without diving into the details, what I tried to achieve has been resolved by restructuring the DOM layout and using fixed instead of absolute.
I also see there's no way around the current implementation without restructuring the admin dashboard. Hence, I'm marking this for closure.
html, body { height: 100%; }is a common CSS technique to make the body element always extend its height to the bottom of the screen when the page content height is less than the screen height. Without that, for example, the footer wouldn't stick to the bottom:That wouldn't work because a percentage height is calculated on the height of the parent element.
I guess this depends on a case by case basis and on what you're actually trying to do. Centering a modal dialog is pretty simple, can you describe a scenario where calculating a modal position through CSS would be impossible?