Вопросы Теги

JQuery-Mobile область контента 100% высота между головой и ногой

Много тем на эту тему... но не понимаю, как это сделать.

У меня есть мой заголовок JQM и нога. Я хочу, чтобы область контента заполнила 100% высоты между головой и ногой.

Это мой код, как это возможно? 

<body>
        <div data-role="page" id="entryPage" data-theme="d">

        <div data-role="header" id="header" data-position="fixed" data-theme="d">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content" data-theme="d">

             <div id="columnwrapper">
                <div id="leftcolumn">
                    <div class="innertube">
                        Point 1
                    </div>
                    <div class="innertube">
                        Point 1
                    </div>
                </div>
            </div>

            <div id="rightcolumn">
                <div class="innertube">
                    <div id="switch1">
                        test
                    </div>
                </div>
                <div class="innertube">
                    test2
                </div>

            </div>

            <div id="contentcolumn">
                <div class="innertube">Content</div>
                <div class="innertube">Content</div>
            </div>

        </div><!-- /content -->
        <div data-role="footer"  id="footer" data-position="fixed" data-theme="d">

            <div id="switch2">
                <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
            </div>

        </div><!-- /footer -->
    </div><!-- /page -->
</body>

CSS:

#columnwrapper{
    float: left;
    width: 100%;
    margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
    background-color: #C8FC98;

}

#leftcolumn{
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
    background: #C8FC98;
}

#rightcolumn{
    float: left;
    width: 40px; /*Width of right column*/
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
    background: yellowgreen;
}

#contentcolumn{
    float: left;
    width: 75%; /*Width of content column*/
    background-color: blue;
}

.innertube{
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;

}

На самом деле внутренняя область заполняет только высоту в зависимости от содержания... значит 2 divs 2 ряда, но не 100%...

Спасибо

18
задан dotchuZ 16 September 2011 в 14:09
поделиться