разделить с позиции абсолютного и липкого нижнего колонтитула - PullRequest
Новая
       7

разделить с позиции абсолютного и липкого нижнего колонтитула

6 голосов
/ 19 января 2012

У меня проблемы со следующим макетом html.

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

Я использовал это Решение StickyFooter.

Проблема в правильной панели.

Он должен оставаться фиксированным на уровне 25px от нижнего колонтитула, но, как вы видите, если содержимое бара увеличивается, содержимое переходит вниз нижнего колонтитула и выходит за нижнюю границу бара.

Очевидно, я бысодержимое остается внутри панели, вызывая ее рост и толкая нижний колонтитул. 

<!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; }

        #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;
            position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
            border:solid 2px #90bfe7; background-color:#ffffff; 
            padding:15px 10px;
        }        

        #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>
                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;
                Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
            </div>
        </div>
    </div>
    <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.
    </div>
    <div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>

Ответы [ 8 ]

1 голос
/ 26 января 2012

Оставьте свой 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; }

PS это плохой вопрос.

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

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

0 голосов
/ 20 апреля 2012

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

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

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

0 голосов
/ 07 марта 2012

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

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

Редактировать:

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

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

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

0 голосов
/ 09 февраля 2012

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

Ниже немного другой подход, который очень похож (точно?) На ваш. Я не тестировал в других браузерах, кроме 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>
0 голосов
/ 25 января 2012

@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>
0 голосов
/ 24 января 2012

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

0 голосов
/ 20 января 2012

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

<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>`
0 голосов
/ 19 января 2012

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...