Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #766422

    Hello, I was wondering if there is anyway to make the last section of a page fill to 100% of the footer. When a page does not have enough content, the body html only extends to the end of the content, however with a sidebar nav this can be strange as the nave extends the entire height.

    Here is an example: http://dev.andrewmorrallarchitect.com/home-2/

    What would be great is if the bottom section always extended to touch the footer and the content was top aligned so it doesn’t look any different.

    The main reason I need this is I want the left nav to stop where the white section begins. Unfortunately since the header is absolute and a separate div than main one extends the full length while the other is adjusting to the content and not screen.

    #766747

    Hey haydaw,
    The left nav changes with each screen size, as dose the content. Have you considered making all of the background the same color with white text?
    Try this code in the General Styling > Quick CSS field:

    html.html_header_sidebar #wrap_all,.alternate_color {
        background-color: #333!important; 
    }
    #white-box.home, h1 {
        color: #fff !important; 
    }

    postimage
    Best regards,
    Mike

    #766787

    HI Mike,

    Unfortunately the design is set and the bottom half of the page should be a white background.

    The issue is the content does not fill the height of the document. If reviewed in inspector, once height of the browser exceeds the page’s content, it’s just a blank area below. (except for the header, which is absolute positioned). What I would want is for the content to extend to the bottom of the footer, so in other words, instead of the height being the minimum of the content, I want it to be the maximum of the visible browser height.

    #766963

    Hi,
    Ok, Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .html_header_sidebar .container_wrap {
        height: 400px !important; 
    }
    
    #header:before {
        height:650px !important;
    }}
    
    @media only screen and (min-width: 1024px) {
    .html_header_sidebar .container_wrap {
        height: 500px !important; 
    }
    
    #header:before {
        height:750px !important;
    }}
    

    postimage
    postimage
    postimage

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.