Get select fixed to the bottom but pull parent bg with it

HTML & CSS
1

I want the select box to sit fixed at the bottom. ( image attached to this thread ) but when I apply position: fixed; i guess it is removed from the document flow and the containing div with a white bg does not flow to the bottom with the select box.

so, with my current markup, how can I get the select box to sit right above the nav ( which is also currently position: fixed ) and pull the white bg down with it?

#wrapper > div has the white bg and I’m trying to make it extend with a fixed select box.


<div id="wrapper">
            <h1>Header</h1>
            <div>

                <form action="" method="">

                    <p>CHOOSE YOUR LOCATION</p>

                    <select id="state" name="state" size="5">
                        <option value="" selected="selected">Choose a state</option>
                        <option value="alabama">Alabama</option>
                        <option value="alaska">Alaska</option>
                        <option value="Arizona">Arizona</option>
                        <option value="Arkansas">Arkansas</option>
                        <option value="California">California</option>
                    </select>
                </form>

            </div>

            <nav>
                <ul>
                    <li><a href="">NAV</a></li>
                    <li><a href="">NAV</a></li>
                    <li><a href="">NAV</a></li>
                </ul>
            </nav>
        </div>
2

Now that I think about it, there may be other pages with 1 line of content ( not enough to span to the bottom of the page ) so I may want some abitrary element to sink to the bottom and drag the white bg with it…

3

Hi,

Your layout begs a number of questions before we can give an answer.

First of all if you want the white background to go to the bottom of the page why don’t you simply set the body background to white instead? Or does your drawing not show all the details? We really need all the html and css that you are using so that we can see what you have got to start with.:slight_smile:

If you have your nav and select fixed to the bottom of the page then what are you going to do when the content above it reaches the select and and nav? Does the content just slide behind those 2 elements and the nav and select sticking always to the bottom of the viewport? If on the other hand you want the select and nav to start moving down the page once the content starts pushing them then that’s a sticky footer approach (see the CSS faq for a full rundown).

It all depends on the dynamics of the page and your exact requirements. There are a number of other scenarios we could consider also so we’ll need to know what happens next ?