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:
@@ -628,6 +628,24 @@ def render_sticky_footer() -> None:
|
|||||||
st.markdown(
|
st.markdown(
|
||||||
"""
|
"""
|
||||||
<style>
|
<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"] {
|
[data-testid="stAppViewBlockContainer"] {
|
||||||
/* Reserve room for the fixed footer overlay (footer min-height
|
/* Reserve room for the fixed footer overlay (footer min-height
|
||||||
32px + 0.25rem * 2 padding ≈ 2rem). */
|
32px + 0.25rem * 2 padding ≈ 2rem). */
|
||||||
|
|||||||
Reference in New Issue
Block a user