Исправлен непрокручиваемый нижний колонтитул внутри div?

Я делаю небольшой div в центре страницы с фиксированным нижним колонтитулом, но div можно прокручивать.
По моему мнению, есть два способа сделать это:

  1. Использование position:fixed: фиксированная позиция действительно работает относительно окна браузера, но мне нужна позиция относительно моего маленького div
  2. Использование position:absolute : Использование bottom:0; Сначала я решил проблему, но прокрутка нижнего колонтитула с текстом div.

HTML:

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

CSS:

#wrapper{
    width:600px;
    height:500px;    
    border:thin solid #c00;
}
#box {
    width:400px;
    height:300px;
    margin:100px auto;            
    border:medium dashed #c00;
    position:relative;    
    overflow:auto;
}
#content {
    background-color:rgba(0,0,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}​

Чтобы увидеть: JSfiddle

Как сделать нижний колонтитул фиксированным для этого div?


css css-position position positioning
person Abhishek Gupta    schedule 26.05.2012    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Решение: внутри вашего внешнего #wrapper создайте еще одну оболочку для #box — см. http://jsfiddle.net/thebabydino/6W5uq/30/

Вы оформляете свою оболочку коробки:

.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}

... вы вынимаете width, margin и position:relative вместо #box:

#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}

... и вы принимаете во внимание borders для #box при позиционировании #footer.

Еще одна вещь: position: fixed относится не к родителю, а к окну браузера, так что в данном случае это не тот путь.

person Ana    schedule 26.05.2012

arrow_upward
1
arrow_downward 

<div id="wrapper">
    <div id='outer_box'>
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

Затем добавьте стили к элементам, как описано здесь: http://jsfiddle.net/6W5uq/29/

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

person Death    schedule 26.05.2012

arrow_upward
1
arrow_downward

Вместо использования #footer вам нужно внести определенные поправки. Попробуйте следующее:

В #footer добавьте margin-top:10px; вместо position:absolute; внизу: 0px;

определите для этого margin-top высоту, которую вы хотите, чтобы нижний колонтитул был ниже div «некоторые тексты». Это происходит из-за того, что нижний колонтитул устанавливается в нижней части div, но поскольку впереди еще текст и включено переполнение, он прилипает к нижней части высоты div, а не к нижней части содержимого.

person Shivang    schedule 26.05.2012