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

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

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

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

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

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

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

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

источник

2012-01-19 opaera

Возможно, это неразрешимо? – opaera

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

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

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

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

источник

2012-01-19 11:00:01

Извините, но это не сработает. Содержимое панели выходит за нижний колонтитул, а также, если содержание в баре невелико, панель не фиксируется на 25 пикселей от нижнего колонтитула, а просто соответствует ее содержимому. Замена абсолютного позиционирования на правильное плавание является одним из проверенных решений, без успеха. Спасибо в любом случае за ответ. – opaera

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

<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>`

источник

2012-01-19 22:04:41 Mouna

Извините, но это похоже на предыдущий ответ, ber не растет, когда содержание страницы больше, чем содержимое панели. Спасибо, в любом случае. – opaera

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

источник

2012-01-23 20:18:48

Я не указал это, но мне не нужны полосы прокрутки ... это было очевидно, я думаю. – opaera

Я вижу, что вы сейчас говорите. –

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

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

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

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

источник

2012-01-25 04:05:24

Я знаю, что это решение, но оно мне не нужно, поскольку оно отличается от моего макета. То, что я написал, это то, что мне нужно построить, это другой макет, и еще одна вещь о вашем коде, если содержание страницы растет, панель не растет .. вы должны использовать решение Css Holy Grail, чтобы сделать это в своем код. – opaera

Оставьте свой 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, и вам нужно сделать какой-то взлом, чтобы получить эту презентабельную.

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

источник

2012-01-25 20:20:55 1nfiniti

вот скрипка с «рабочим» кодом ... CSS Guru не требуется ... Это просто дешевая работа для взлома. Гуру CSS сказал бы вам не строить свою разметку таким образом. http://jsfiddle.net/TPk29/5/ – 1nfiniti

PS Нет никакого способа получить правильный бар, чтобы расти вертикально с контентом. Вы можете имитировать это, применяя фоновое изображение к контенту, который выравнивается с фоном правой панели ... Если это вам поможет – 1nfiniti

Это не работает, когда содержимое страницы растет и оно больше, чем содержимое бара, бар не растет вертикально. Я думал, что это действительно неразрешимо, кстати, это всего лишь макет, разработанный в Photoshop, и мне тоже понравилось. Поэтому мне просто интересно, может ли кто-нибудь заставить его работать. Возможно, это неразрешимо, в этом случае я изменю его (уже изменил). Кстати, я думаю, что это хороший вопрос для страстных css. – opaera

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

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

источник

2012-02-09 01:51:42

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

np. то, что вы хотите, возможно, но не так, как вы это сделали. –

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

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

Edit:

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

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

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

источник

2012-03-07 13:13:18 ddilsaver

Я пробовал позицию: относительный, но с этим я не могу получить то, что хочу. – opaera

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

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

Для решения проблемы см. this fiddle.

источник

2012-04-20 14:00:15

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

ответ

Смежные вопросы