I am making a webpage which has a fixed header and then three columns below. I am using columns of the bootstrap grid. I am giving each column a background image and a couple of lines of text. What I want is for the page to be broken into three even sections under the header, which stretch to the bottom of the page, filling it but not causing a scrollbar. I would like the background images to scale (not crop) when the window is resized, and for text to remain horizontally and vertically centered in its column. When the window is made narrow, or on a mobile device, I would like the three columns to stack on top of each other, with heights that together fill the screen.
I made a diagram to show what I want vs what I get: http://i.stack.imgur.com/y7PUL.jpg
What I am getting is the columns do line up side by side in a larger window, they do scale when I resize the browser window, and they do "stack" when the window becomes narrow like a mobile view, so those things are all good. However, the bootstrap columns will only be as tall as the text I put in them. I do not want them to "wrap" the text, I want them to just "stretch" to fill the page despite having little text content. All of the similar questions I have seen on this site about making bootstrap columns longer involve making the column long enough to match an adjacent column which contains more text. If I add more text the column extends, but I do not want that. I also would rather not set a fixed height in pixels, and I am wary of using tables.
Based on different questions, so far I have tried several solutions including using flexbox, background-size: cover, and setting min-height or height to 100% in several places. By setting height to 100% (including in html and body) I can get the images to fill the page, but they fill the page + the height of the header, creating an unwanted scrollbar, AND it makes the images seem to crop instead of scale upon resize, AND it makes all of the columns be very tall in the mobile style view, leading to a scrollbar.
I would prefer the answer to use just CSS and HTML, but I am open. Thanks in advance!
I made a fiddle with a very (ugly) stripped down version of my page, with some stock backgrounds: https://jsfiddle.net/qbjk7v60/27/ (note, the fiddle seems to only show the columns in the view where they are stacked, but you can still see the issue with the white space instead of the columns filling)
.column-edit {
height: 100%;
text-align: center;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}