CSS Позиционирование: отображается нижнее меню левой руки

Question

У меня есть расположение двух столбцов CSS, которое является фиксированным и центрированным. На страницах, где длительность навигации длинна, а контент короток, нижний колонтитул не перемещается ниже навигационной системы - он остается на минимальной высоте области содержимого, а навигационная система отстает от нижнего колонтитула.

Я включил все в скрипку для вас, чтобы увидеть: http://jsfiddle.net/fmJqw/1/

Но по существу, я следующую структуру:

<div id="wrapper"> 
    <div id="headerWrapper"></div> 
    <div id="bcrumbwrapper"></div> 
    <div id="midWrapper"> 
     <div id="navWrapper"></div> 
     <div id="contentWrapper"></div> 
    </div> 
    <div class="clear"></div> 
    <div id="footerWrapper"></div> 
</div> 

CSS-выглядит следующим образом:

#wrapper{ 
    padding:0px; 
    margin:0 auto; 
    width:1000px; 
    min-height:768px; 
} 
/*Header styles*/ 
#headerWrapper{ 
    padding:0px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:175px; 
    position:relative; 
} 

#bcrumbWrapper{ 
    padding:0px 0px 0px 20px; 
    margin:0px; 
    width:980px; 
    min-height:24px; 
    position:relative; 
} 

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
    min-height:513px; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    float:left; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

#footerWrapper{ 
    padding:5px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:40px; 
    position:relative; 
} 

Любая помощь с благодарностью оценили! Я вырываю волосы.

Answer 1

Я нашел ответ на этот вопрос от друга, который не является членом здесь, поэтому хотел опубликовать его для ссылки на кого-либо в будущем.

Потому что я пытался поплавать обоими пунктами влево, но, используя абсолютное позиционирование для одного из div, все конкурировало. Я удалил float на обертке содержимого и удалил абсолютное позиционирование в навигационной оболочке. Затем я изменил цвет фона содержащего div, чтобы убедиться, что он появился так, как будто navwrapper выполнил длину страницы.

Так он стал:

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
    background-colour: #EBE2CA; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

Нет изменений в HTML и не JavaScript, необходимого!

Спасибо за помощь :) И спасибо моему другу Крису за этот ответ.

Answer 2

Вы всегда можете динамически изменять минимальную высоту с помощью javascipt, основанного на высоте div, содержащей контент, который, как я считаю, является #contentWrapper.

Вы можете проверить CSS Sticky нижний колонтитул: http://www.cssstickyfooter.com/, но это займет немного времени, чтобы заставить его работать из-за характера вашей разметки.