Confusion on making something 100% height - Support | Kriesi.at

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

Author

Posts
March 25, 2017 at 1:57 am #766422

haydaw
Participant

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.

March 25, 2017 at 10:01 pm #766747
Mike
Moderator
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; 
}
```
Best regards,
Mike
March 26, 2017 at 1:37 am #766787

haydaw
Participant

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.

March 26, 2017 at 4:04 pm #766963
Mike
Moderator
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;
}}
```
Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.