fix(footer): stretch .stApp + sidebar + main to compensate for zoom

User screenshot pinned the actual culprit: a horizontal white band
across the FULL viewport width (including over the sidebar) above
the Help/Close footer. Diagnosis:

  - ``.stApp`` carries ``zoom: 0.85``, so any descendant sized at
    ``100vh`` only renders at ~85vh visually.
  - At 1920x1050 the visual end of ``.stApp`` is around y=893; the
    fixed footer overlays y=1017..1050; the strip in between (124px
    at this resolution) is ``body`` painting white through, because
    ``.stApp``, ``stSidebar`` and ``stMain`` are all shorter than
    the viewport.
  - The previous "min-height: 100vh/0.85" rule targeted the legacy
    ``data-testid="stAppViewBlockContainer"``. The current Streamlit
    release renamed that testid to ``stMainBlockContainer`` — so the
    rule was a no-op for months. Verified the new testid by walking
    the live DOM.

Fix: stretch ``.stApp``, ``[data-testid="stSidebar"]`` and
``[data-testid="stMain"]`` with ``min-height: calc(100vh / 0.85)``
so they fill the visible viewport. Keep the block-container's 2rem
``padding-bottom`` (now matching both the new and legacy testids in
case Streamlit rolls it back).

Verified at 1920x1050: sidebar gray extends to y=1050, content area
extends to y=1050, footer overlays the bottom 33px, no white band
between content and footer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-18 23:22:11 +00:00
parent c942b8aa19
commit 65b663be97

View File

@@ -628,6 +628,24 @@ def render_sticky_footer() -> None:
st.markdown(
"""
<style>
/* ``.stApp`` carries ``zoom: 0.85`` (compact-layout scaler) so any
child sized at ``100vh`` only renders at 85vh visually — the bottom
~15% of the viewport is OUTSIDE ``.stApp`` and shows ``body``'s
white through, producing a horizontal "white bar" across the full
width above the fixed footer. Compensate by stretching ``.stApp``
and the layout containers to ``100vh / 0.85`` so they fill the
visible viewport. Streamlit renamed the block-container testid in
the current release — match both the new ``stMainBlockContainer``
and the legacy ``stAppViewBlockContainer`` so the rule keeps
working if/when the framework rolls back. */
.stApp {
min-height: calc(100vh / 0.85) !important;
}
[data-testid="stSidebar"],
[data-testid="stMain"] {
min-height: calc(100vh / 0.85) !important;
}
[data-testid="stMainBlockContainer"],
[data-testid="stAppViewBlockContainer"] {
/* Reserve room for the fixed footer overlay (footer min-height
32px + 0.25rem * 2 padding ≈ 2rem). */