How to make the col 's content take the whole page height and the col width

Using Streamlit
1

Hi,
I have this code :

import streamlit as st
st.set_page_config(
    page_title="Login",
    page_icon="🔏",
    layout="wide")

col1, col2 = st.columns(2)

with col1:
    with st.container(key="image-container"):
        st.image("https://static.streamlit.io/examples/dog.jpg")

with col2:
    st.image("https://static.streamlit.io/examples/dog.jpg")

what i’m trying to do is to make the col content to take the whole height of a page like in the picture bellow(the result you see in the picture below, I played with the browser inpect to get this result). is there a way please to get the same result using streamlit.
thanks

image
image1916Ă—932 111 KB

2

This isn’t necessarily a great solution, because the width won’t be automatically adjusted, and so the images can overlap or be spaced out depending on the width of your screen, but you can add custom css like this:

import streamlit as st
st.set_page_config(
    page_title="Login",
    page_icon="🔏",
    layout="wide")

col1, col2 = st.columns(2)

with col1:
    with st.container(key="image-container"):
        st.image("https://static.streamlit.io/examples/dog.jpg")

with col2:
    st.image("https://static.streamlit.io/examples/dog.jpg")

st.html(
    """
<style>
    img {
        height: 100%;
        position: fixed;
        top: 0;
    }
</style>
"""
)

If you want only the left column, with the key “image-container” to be resized, you can do this:

import streamlit as st
st.set_page_config(
    page_title="Login",
    page_icon="🔏",
    layout="wide")

col1, col2 = st.columns(2)

with col1:
    with st.container(key="image-container"):
        st.image("https://static.streamlit.io/examples/dog.jpg")

with col2:
    st.image("https://static.streamlit.io/examples/dog.jpg")

st.html(
    """
<style>
    .st-key-image-container img {
        height: 100%;
        position: fixed;
        top: 0;
    }
</style>
"""
)
3

@blackary thanks, it it remaines the header…it does not covered by the picture …any solution please ?

image
image1895Ă—665 178 KB

4

You’ll either need to hide the header or use negative margins.

The header gets hidden when the app is embedded, or you can use some additional CSS:

.stAppHeader {
    display: none;
}
1 Like
5

thanks, but what do you mean by “The header gets hidden when the app is embedded” please ?

6

@blackary thanks,
I see one drawback for this approch that when the browser get resized the the second col is hidden or disapeared I dont know why .

7

That’s likely happening because st.columns are dynamic, and if you make the window narrow enough, the columns go away and the contents of each one just become one after the other (as if they weren’t in columns). Though it’s probably possible to get around this (and make the columns always work like columns, even if the window gets very narrow), I don’t think it would be very easy.

1 Like
8

For example, all the apps you see in the Streamlit docs are embedded. When you visit an app and add ?embed=true to the end of the URL, it modifies the display of the app for embedding.

1 Like