Прокрутите автоматический размер div между двумя div

Question

Прокрутите автоматический размер div между двумя div

0

Эй, ребята, я делаю сайт для клиента. И основной макет мне понравится: http://jsfiddle.net/t6EKv/469/

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

Чтобы сделать это немного сложнее, я собираюсь поддерживать ширину монитора больше или равна 1280 пикселей. Так как кнопки и текст будут отображаться в верхнем и нижнем колонтитулах (помещены как абсолютные), страница в целом должна иметь возможность прокручивать по оси y для меньшего экрана с. Прокручиваемая часть не является частью вопроса, но это просто означает, что я не могу использовать postion:fixed; на любом из трех разделов.

Я получил эту работу отлично в chrome, но как только я проверил firefox и IE, это с треском провалилось. Firefox сворачивает содержимое div и показывает фактическое содержимое более высокого индекса z, чем заголовок. IE по какой-то причине не покажет весь мой контент.

Я поместил основы моего текущего кода в JSFiddle: http://jsfiddle.net/9JMm2. Но даже здесь это кажется более грубой, чем в моей версии хром.

Может кто-нибудь помочь?

RoXaS 17 апр. 2014, в 22:14

Источник

1

Вы ищете что-то подобное? jsfiddle.net/SSHe6
dward 17 апр. 2014, в 19:48

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Вы ищете что-то подобное? jsfiddle.net/SSHe6

Guy Dafny · Answer 1 · 2014-04-17T17-08-00.000Z

Используйте "absolute", в то время как для контента используется "overflow: auto",

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <style type='text/css'>
            div.header { position:absolute; top:0em; height:1em; background-color:red; white-space:nowrap; min-width:640px;}
            div.content { position:absolute; top:1em; bottom:1em; overflow:auto; background-color:green;}
            div.footer { position:absolute; bottom:0em; height:1em; background-color:yellow;white-space:nowrap;min-width:640px;}
        </style>
    </head>
    <body >
        <div class='header'> this is the header </div>

        <div class='content'> 
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
            this is the content this is the content this is the content  
         </div>

        <div class='footer'> this is the footer </div>
    </body>
</html>

Я проверю это завтра, я боюсь, что это разрушит мой сценарий переполнения-х. Спасибо хоть.
Извините за поздний ответ, я не могу заставить его работать с кнопкой входа в систему. Плюс это дает мне полосу прокрутки для всей страницы.
какая кнопка журнала? где это должно быть? Используя FireFox (Linux) у меня не было глобальной полосы прокрутки. какой браузер вы используете? (Если ms-explorrer - какая у него версия?)