Выполнение странных требований с помощью CSS (вид имитации кадров) - PullRequest
Новая
       13

Выполнение странных требований с помощью CSS (вид имитации кадров)

1 голос
/ 04 мая 2010

Я изо всех сил пытаюсь найти способ кодировать сайт в соответствии с нашими странными требованиями. Сайт должен корректно отображаться во всех браузерах от IE6 до Opera.

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

верстка сайта http://www.4freeimagehost.com/uploads/820aee2ded8b.png

А вот и кикер: каждый из трех разделов должен прокручиваться отдельно, и полоса прокрутки браузера не должна появляться. Страница должна отображаться так же, как если бы она использовала фреймы. Конечно, на достаточно большом экране полосы прокрутки появляться не должны.

Неважно, какой способ используется для отображения сайта, хотя фреймы не являются опцией, дивы предпочтительнее. Есть два условия:

  • Сайт должен всегда заполнять весь экран браузера. Верхний колонтитул и раздел контента должны доходить до правой границы страницы, а навигация и контент - внизу.

  • Как только сайт будет уменьшен - будь то из-за изменения размера окна браузера или из-за меньшего разрешения - должна появиться полоса прокрутки для каждого отдельного раздела, но не будет «полосы прокрутки браузера» для всей страницы , Заголовок должен всегда сохранять свою высоту, а навигация - всегда ширину.

Знаете ли вы, как всего этого можно достичь?

Yours Бернхард

edit 1: Да, и я забыл: сайт должен быть доступен для просмотра в разрешении 1024x768. править 2: Другое дело: заголовок имеет фиксированную высоту, а навигация - фиксированную ширину. Высота навигации, а также высота и ширина содержимого должны занимать весь экран.

Ответы [ 4 ]

0 голосов
/ 04 мая 2010

Рамки все еще существуют по причине. Там время и место. Это, вероятно, это.

Но вот способ сделать это с помощью CSS вместо фреймов: 

<!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">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Not Frames</title>
        <style type="text/css" media="screen">
            .fake-content {
                margin: 20px;
                background-color: #000;
                height: 1500px;
                width: 1500px;
            }

            /* Get rid of the original scrollbars */
            html, body
            {
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            /* The frames */
            .frame
            {
                position: absolute;
                overflow: scroll;
            }

            /* The sections */
            #header
            {
                top: 0;
                height: 250px;
                width: 100%;

                background-color: #F00;
            }

            #sidebar
            {
                top: 250px;
                bottom: 0;
                left: 0;
                width: 250px;

                background-color: #0F0;
            }

            #content
            {
                top: 250px;
                bottom: 0;
                left: 250px;
                right: 0;

                background-color: #00F;
            }
        </style>
    </head>
    <body>
        <div id="header" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="sidebar" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="content" class="frame">
            <div class="fake-content">Content</div>
        </div>
    </body>
</html>
0 голосов
/ 04 мая 2010

Хороший вопрос. Для этого вам нужно найти размер разрешения экрана браузера x и y (возможно, с использованием javascript). с этим размером назначьте ширину и высоту в разделе div.

В div вы можете использовать вот так 

<div id="nameID" style="position: relative; overflow-y: auto; overflow-x: auto;"></div>

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

0 голосов
/ 04 мая 2010

Итак, теперь я нашел способ заставить эту работу работать без заголовка.

В разделе навигации используется следующий CSS: 

float: left;
height: 100%
overflow: auto;
width:185px;

Раздел содержимого использует это: 

height: 400px;
overflow: auto;

а также 

html, body{
    height: 100%
}

Единственная проблема заключается в том, что когда я вставляю заголовок, сайт растягивается до тех пор, пока не выйдет за пределы окна браузера. Это связано с использованием height: 100%. Вы знаете, как я могу сделать так, чтобы страница все еще вписывалась в экран браузера?

изменить 1: Следующий JavaScript поможет, по крайней мере, в Firefox: 

window.onresize = resize;

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("content").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}

Но, может быть, есть более элегантное решение CSS ...

0 голосов
/ 04 мая 2010

ОБНОВЛЕНИЕ:

Я нашел эту статью

Просто CSS и HTML, я думаю, это то, что вы ищете!

ФИНАЛЬНОЕ ДЕМО : http://jsbin.com/icemo3/24

В ответ на ваш последний комментарий я разработал это решение, которое требует также немного jquery (javascript), пожалуйста, посмотрите демо и используйте демонстрационный код! 

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

CSS DEMO 2: http://jsbin.com/icemo3/2

CSS DEMO 3: http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

Примечание: 

tested on: 
IE6+
Chrome
Firefox
Opera
  1. каждая секция имеет собственную полосу прокрутки!
  2. каждая секция имеет 100% ширину и высоту!
  3. полоса прокрутки окна браузера не появляется!
  4. каждый раздел всегда сохраняет свою пропорцию
  5. работа на всех разрешениях экрана
...