Чистая CSS-эмуляция фрейм-набора - PullRequest
Новая
       8

Чистая CSS-эмуляция фрейм-набора

7 голосов
/ 08 августа 2010

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

Я могу заставить его работать, назначив переполнение: auto для моей области содержимого div и установив фиксированную высоту.Но проблема в том, что я не знаю размер окна браузера клиента без использования JavaScript.И я не хочу использовать JavaScript для этого.Я также не могу использовать проценты для высоты, так как мой верхний блок имеет фиксированную высоту.Нижний блок - это тот, который должен расширяться или уменьшаться в зависимости от высоты окна браузера.Любая помощь приветствуется.Спасибо!

Ответы [ 3 ]

1 голос
/ 08 августа 2010

Как на счет этого?

HTML 

<div id="header">
    <img src="logo.gif" alt="logo" />
    <h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
    <div id="content-offset">
        <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
    </div>
</div>

CSS 

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 0;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}
1 голос
/ 08 августа 2010

Ответ Макро близок, но плохо работает.Контент перекрывает заголовок.

Кстати, вы хотели бы использовать position: fixed; для заголовка, а не для контента.Это также делает упаковку лишней.Вот базовый пример запуска, вы можете скопировать и запустить его. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3433129</title>
        <style>
            body { 
                margin: 0;
                background: aqua;
            }
            #header {
                position: fixed;
                height: 120px;
                width: 100%;
                background: pink;
            }
            #content {
                padding-top: 120px; /* Should be the same as #header height */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <p>Start of content.</p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p>End of content.</p>
        </div>
    </body>
</html>
0 голосов
/ 08 августа 2010

Нет.Я думаю, вам придется использовать javascript для получения размера окна для этого, если вы не установите верхний блок на фиксированный%, например, сделайте верхний блок 10%, а нижний 90%.

...