div в сторону с абсолютной позицией и липким нижним колонтитулом

Оставьте свой HTML как есть, измените свой CSS на это:

   /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
        clear:both;
    }

    #footerPage, #divPush 
    {
        height: 50px; /* .push must be the same height as .footer */
    }
    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage { width:960px;position:absolute;top:0;left:0; }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
        position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
    }     
    #divPush {clear:both;}

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }

P.S. это плохой вопрос.

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

В противном случае этому подходу нет оправдания.

Я внес некоторые изменения в опубликованный вами код, надеюсь, это поможет! `

<style type="text/css">        
    /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */

    }

    #footerPage 
    {
        height: 50px; /* .push must be the same height as .footer */

    }

    #divPush {height: 800px; }

    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage {  }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
         right:10px; top:13px; width:200px;  /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
        display:inline;
        float:right;
        height: 100%;
    }        

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>`

Я могу быть озадачен тем, что вы ищете, но почему бы не добавить overflow: auto под id = sectionBar? Таким образом, если контент больше, чем ваше поле, он добавит полосу прокрутки, а не будет перетекать через нижний колонтитул. Опять же, возможно, я упускаю вопрос или конечный результат, который вы ищете.

@ lorenzo.macon прав - вам нужно избегать использования position: absolute и использовать вместо него float.

Одна из ваших проблем заключалась также в том, что нижний колонтитул должен иметь ту же общую высоту, что и отрицательное поле оболочки; похоже, что, возможно, вы не учли отступы и / или границы в уравнении.

Поставляемый код включает вторую боковую панель в коде, так что, если бы она не была размещена (например, для адаптивного макета), она появилась бы позже. Но на самом деле вы можете получить это в любом случае, и это должно сработать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">        

/* LAYOUT */
    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */

* { margin: 0 }

html, body, .wrapper {
    height: 100%;
    }

body {
    margin: 0 auto; 
    position: relative; 
    }

.wrapper {
    position: relative; 
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -70px; /* bottom margin = -1 x ( #footerPage height + padding + border ) */
    }

#footerPage, #divPush {
    height: 50px; /* .push must be the same height as .footer */
    padding: 10px; /* must have same padding! */
    }
#divPush {
    clear: both;
    }
    /* End / Sticky Footer */


#sectionPage {
    width: 70%;
    float: left;
    }

/* 
    #sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage
    and ems for T+B padding so can relate to typography. This is less important.
*/
#sectionBar {
    width: 20%;
    padding: 2em 5%;
    margin-left: -1px; /* IE7 needed this */
    float: right;
    display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */
    }        

/* VISUAL STYLE separated for clarity */

body {
    background: #000; 
    max-width: 960px; /* use max-width for flexible layouts */
    font-family: Tahoma, Verdana;
    }

div.wrapper { background: #fff }

#divHeaderImg { height: 100px; }            
#navPage { background: #90bfe7; padding: .5em; }
#divSubMenu {
    background: #90bfe7;
    padding: .5em;
    }

#sectionBar {
    background: #fcf; 
    }        

#footerPage {
    position: relative;
    background: #90bfe7;
    }

#content {
    background: #ffc;
    padding: 12px 10px 10px 10px;
    }
    </style>
</head>
<body>
<div class="wrapper">

  <div id="sectionPage">
    <div id="headerPage">
      <div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
      <div id="divHeaderImg"></div>
      <div id="divSubMenu">sub menu</div>
    </div><!-- #headerPage -->
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    </div>
  </div><!-- #sectionPage -->

  <div id="sectionBar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
  </div>

  <div id="divPush"></div>

</div><!-- .wrapper -->

<div id="footerPage">footer</div>
</body>
</html>

Вы не можете сделать полоску абсолютной с верхним и нижним «полями» и ожидать, что она вырастет сверх того размера, который вы ей указываете.

Ниже представлен немного другой подход, который очень (в точности?) Похож на ваш. Я не тестировал в других браузерах, кроме firefox 8, поэтому не могу гарантировать, что он пуленепробиваемый, но это должно, по крайней мере, дать вам альтернативную идею:

<!doctype html>
<head>
<style type="text/css">        
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#footerPage, #divPush 
{
    height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */


body { background-color:#000;
 width:960px;
 margin:0 auto;
 position:relative;
 font-family:Tahoma, Verdana;
 }

div.wrapper { 
    background-color:#fff; position:relative; 
    border:2px solid pink;
}

#headerPage {  
    border:2px solid green;
}
#divHeaderImg { height:100px; }            
#navPage { 
    height:30px;
 line-height: 30px;
 font-size:16px;
 background-color:#90bfe7;
 padding:0 10px;
 /*
 position:relative;
 overflow:hidden;
 */
 vertical-align: middle;
    border:2px solid lime;

 }
#leftBox {
    border:2px solid yellow;
    float;left;
}
#divSubMenu { 
    border:2px solid darkgreen;
    background-color: #90BFE7;
 line-height: 28px;
 padding: 10px;
 vertical-align: middle;
 }

#divBarContent {
    border:1px solid firebrick;
}
#divBarContent div {
    border:1px solid cyan;

}        
#sectionBar {
    z-index:1000;
    /*
     position:absolute; right:10px; top:13px; width:200px; bottom:75px; 
    */
    border:solid 2px #90bfe7; background-color:#ffffff; 
    padding:15px 10px;
    float:right;
    margin:0px 10px 25px 0px;
    width:200px;
    /*
    */
}        
/*
*/
/* footer height + 25px */

#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
    <div id="sectionBar">
        <div id="divBarContent">
            <div>

# Update from 2.0-BETA3 to 2.0-BETA4

## XML Driver <change-tracking-policy /> element demoted to attribute

We changed how the XML Driver allows to define the change-tracking-policy. The working case is now:


# Update from 2.0-BETA2 to 2.0-BETA3

## Serialization of Uninitialized Proxies

As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when
trying to access methods on the unserialized proxy as long as it has not been re-attached to the
EntityManager using `EntityManager#merge()`. See this example:


The Collection interface in the Common package has been updated with some missing methods
that were present only on the default implementation, ArrayCollection. Custom collection
implementations need to be updated to adhere to the updated interface.


            </div>
        </div>
    </div>

    <div id="leftBox">
        <div id="headerPage">
            <div id="navPage">menu</div>
            <div id="divHeaderImg"></div>
            <div id="divSubMenu">sub menu</div>
        </div>
        <div id="sectionPage">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            <br> <br> <br> <br> <br> <br> moo
        </div>
        <div id="divPush"></div>
    </div>
    <div style="clear:both;">
</div>
<div id="footerPage">footer</div>

</body>
</html>

Вы, вероятно, можете использовать вместо этого position:relative;, потому что absolute заставит ваши элементы идти за ним, если вы не используете z-index:, тогда элементы будут располагаться поверх него. Посмотрите на этот липкий нижний колонтитул, если вам действительно нужно построить его таким образом

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Изменить:

Я не уверен, чего вы действительно пытаетесь достичь. Потому что нынешний способ построения HTML не совсем семантичен для того, что вы делаете. Поскольку sectionBar - это боковая панель, она не должна располагаться над вашим основным контентом, она должна быть структурирована после контента sectionPage. Вам также следует использовать числа с плавающей запятой вместо позиции. Таким образом, вам не придется иметь дело с z-index и отставанием в содержании. Страница также будет правильно расширяться с использованием float, но вам придется использовать в основном хак .clearfix для IE.

Также почти никогда не бывает случая, когда вам нужно что-то построить определенным образом. Единственный случай, когда вы используете CMS или существующий старый код. Так что, если вы не получаете желаемого эффекта, вам нужно взглянуть на свою Semantic структуру вашего кода.

В одном из ваших комментариев я видел, что это основано на макете фотошопа, что наводит меня на мысль, что вы строите его с нуля, и означает, что у вас есть полный контроль над HTML. Так что если это так, то утверждение, что оно должно быть построено таким образом, недопустимо.

Это разрешимо. Вы можете сделать это, добавив #sectionBar, как упоминалось в @ lorenzo.marcon.

Вам нужно будет переместить #sectionBar to right before # sectionPage` и обернуть оба элемента. Я также добавил clearfix в оболочку.

См. эту скрипку для решения.

Я бы удалил position:absolute; и добавил float:right; в определение #sectionBar. Затем добавьте <br clear="all" /> непосредственно перед закрытием div с помощью класса «wrapper».

Затем вам придется переставить элементы. Поработайте над полями и отступами, чтобы получить желаемый результат.

Описанная вами проблема вызвана position:absolute поведением. Фактически, при абсолютном позиционировании элемент удаляется из естественного потока html и, как следует из названия, позиционируется абсолютно :) Таким образом, другие элементы (например, нижний колонтитул) идут «под» ним.