Переполнение с абсолютной/относительной компоновкой позиционирования

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

Вот подход, разбитый на его основные компоненты:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
    <div class="header">SOME HEADER</div>
    <div class="someControls">
        <input type="button" value="click me"/>
        <input type="button" value="no me"/>
    </div>
    <div class="inner">
        some text...
    </div>
</div>
</body>
</html>

со следующим css:

.stretched {
    position:absolute;
    height:auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

.inner {
    margin:10px;
    background-color: red;   
    overflow: auto;        
}

Что я пытаюсь сделать, так это иметь div stretched, использующий все доступное пространство вертикального окна просмотра (минус несколько пикселей выше и ниже для верхнего и нижнего колонтитула) и центрированный по горизонтали с фиксированным with.

Кажется, это работает очень хорошо. Проблема в том, что свойство overflow: auto; не применяется к содержимому inner, как я хочу. Когда some text... становится длиннее, div inner перекрывает мой контейнер и не показывает полосы прокрутки.

Вот скрипт: скрипта №1

Я хочу избежать полос прокрутки в теле страницы и вместо этого иметь переполнение, управляемое полосами прокрутки внутри inner div, что делает stretched всегда полностью видимым.

Я мог бы применить тот же трюк с position: absolute; top: 0; ... и к div inner, но тогда мне нужно явно указать высоту header + someControls, чего я хочу избежать, потому что она разная на всех моих страницах.

Вот как это работает, как я хочу (за исключением части top: 40px;): скрипка #2

Что я здесь делаю неправильно? Заранее спасибо!


css css-position overflow
person FlxMgdnz    schedule 24.04.2012    source источник
comment
+1 за хорошо структурированный вопрос и попытку самостоятельно.   -  person MarioDS    schedule 24.04.2012
comment
Требуется ли поддержка IE7?   -  person thirtydot    schedule 24.04.2012
comment
Не обязательно. Хотя было бы неплохо.   -  person FlxMgdnz    schedule 24.04.2012

Ответы (3)


arrow_upward
1
arrow_downward

Я не думаю, что это возможно с чистым CSS (... который работает во всех распространенных браузерах).

Вот подход, использующий старую спецификацию Flexbox: http://jsfiddle.net/thirtydot/xRr7e/

К сожалению, он работает только в браузерах WebKit/Firefox.

Пришло время использовать несколько строк JavaScript для этого макета.

person thirtydot    schedule 24.04.2012

arrow_upward
0
arrow_downward

Удалять

position: absolute;

и добавить

border: 10px solid green;

http://jsfiddle.net/Rpdr9/367/

РЕДАКТИРОВАТЬ: Если вам не нравится огромная рамка, вы можете изменить размер границы на 1px.

border: 1px solid green;

Даже это работает.

person Ankit    schedule 24.04.2012
comment
Спасибо! Но я хочу избежать полос прокрутки в теле страницы, похоже, мне нужно уточнить свой вопрос. Раздел stretched всегда должен быть полностью виден, а переполнение должно обрабатываться полосами прокрутки в разделе inner. - person FlxMgdnz; 24.04.2012
comment
Да, но без фиксированной высоты. Пожалуйста, проверьте другую скрипку, которую я добавил к моему вопросу. - person FlxMgdnz; 24.04.2012

arrow_upward
0
arrow_downward

Эй, почему в вашей таблице стилей определяется абсолютная позиция?

заменить этот

    .stretched {

    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

Живая демонстрация http://jsfiddle.net/rohitazad/Rpdr9/366/

Обновленная скрипта js http://jsfiddle.net/rohitazad/Rpdr9/368/

person Rohit Azad Malik    schedule 24.04.2012
comment
Спасибо! Пришлось уточнить мой вопрос, было бы здорово, если бы вы проверили вторую скрипку, которую я добавил к моему вопросу. - person FlxMgdnz; 24.04.2012