Home Forums Weaver Xtreme Theme Min-height on 2 column content not working Re: Min-height on 2 column content not working

#20691
scrambler
Moderator

If you want both image and text BG to extend to the bottom of the browser, then you are lucky I do like a puzzle and CSS has sometimes some miracles.

Here is my test page (play with the browser size to see the responsive behavior)  Link removed (no longer valid)

In the page check the option “Force Full Browser height”

In the page content editor place just your text for the left column, no html

In Main options > Fonts & Custom > Custom CSS Rule box put the rules below, replacing xxx by the page id #

.page-id-xxx #container {position:relative;background-image:url(ImageUrl);background-size:cover;background-repeat:no-repeat;background-position:right;padding:0px;}
.page-id-xxx #content {width:50%;position:absolute;height:100%;overflow:auto;}

if you have Plus, you can put these rules in the editing page “per page style” box without the page id class

#container {position:relative;background-image:url(ImageUrl);background-size:cover;background-repeat:no-repeat;background-position:right;padding:0px;}
#content {width:50%;position:absolute;height:100%;overflow:auto;}

The first rule is to put the background image on the container as this is the element made full height by the theme option. It also sets position relative so the next rule works.

The second, limits the width of the content are to whatever width you need for the column, then positioned it absolute as the height 100% seems to work in that mode…It also sets the overflow to auto, so that if the browser is smaller than the text needs the first column will have a scroll bar.

You can add a different background color for #content in the second rule if needed.

I believe this is the best we can do