Не можете конвертировать фреймы в CSS?Нужна помощь - PullRequest
Новая
       30

Не можете конвертировать фреймы в CSS?Нужна помощь

1 голос
/ 09 марта 2010

Поскольку я получил комментарии TLDR (слишком долго не читал), я удалил 90% этого, включая все, что я пробовал.

Расположение очень и очень простое. 

-----------------------------------------------------------------
|                                                               |
|   This menu area is fixed and does not scroll up off the page |
|              - NO SCROLL BARS -                               |
|---------------------------------------------------------------|
|                                                               |
|   | ------------------------------------------------------|   |
|   |                                                       |   |
|   |                                                       |   |
|   |      This area, with padding on the left and right,   |   |
|   |      has a scroll bar on its right side (not all      |   |
|   |      the way to the right side of the page), and is   |   |
|   |      attached to the bottom of the browser window -   |   |
|   |      when the bottom of the browser is resized up,    |   |
|   |      this windows shrinks, and scroll bars DO NOT     |   |
|   |      appear on the far right side of the page.        |   |
|   | ------------------------------------------------------|   |
|---------------------------------------------------------------|

Код, который реализует вышеупомянутое с фреймами, работает в IE7, IE8 и Firefox 3.6, без зависимого от браузера кода. Код фрейма тянет две HTML-страницы, чтобы заполнить два «окна» выше. Просто. Ужасно для Google.

Вот пример кода CSS, который не работает. У меня было бы более 100 таких примеров, если бы я сохранил их все. Я использую сервер Apache локально, чтобы подключить SSI. 

<html>
<body>

<div style="float: top; position: fixed; width: 95%; height: 140; border-style: solid">
<!-- SSI code deleted - includes code from another page --> 
</div>

<div style="overflow: auto; top: 100; width: 900; height: 500; background-color:white;
 color:black; text-decoration:none">
<!-- SSI code deleted - includes code from another page -->
</div>

</body>
</html>
  • Что этот код делает в Firefox: нижнее окно прокрутки находится вверху страницы (без полей). (Очень неправильно.) Когда нижняя часть окна браузера перемещается вверх (делает окно браузера меньше), в правой части страницы появляется полоса прокрутки. (Неверно.)
  • Что этот код делает в IE 8: нижнее окно прокрутки правильно расположено под верхним окном меню, но с правой стороны есть полоса прокрутки для всего экрана, и вы должны использовать обе полосы прокрутки, чтобы перейти к нижняя часть текста. (Это единственный пример, который я пробовал в IE 8, так как я потратил все свое время, пытаясь заставить его работать в Firefox.)

Я перепробовал слишком много онлайн-идей, чтобы упомянуть, и я лишился того, что попробовал, из-за комментариев TLDR.

Я должен отметить, что два включенных HTML-файла используют div везде, практически для каждой строки текста, с некоторыми position:absolute объявлениями. (Я этого не писал ...) Второй HTML-файл также использует таблицу. Если вы хотите увидеть включенный код, я предоставлю вам URL-адрес, но я не хочу, чтобы он был опубликован.

Ответы [ 2 ]

3 голосов
/ 09 марта 2010

Попробуйте использовать что-то похожее на следующее: 

<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 140px;
        overflow: hidden;
    }

    .content {
        position: absolute;
        top: 150px; /* 140px (header) + 10px top padding */
        left: 10px; /* 10px padding */
        right: 10px; /* 10px padding */
        bottom: 10px; /* 10px padding */
        overflow: auto;

    }
</style>
</head>

<body>

<div class="header">
    <!--#include virtual="/nav2.html" -->
</div>

<div class="content">
    <!--#include virtual="/main2.html" -->
</div>

</body>
</html>

В результате получается заголовок раздела высотой 140 пикселей, который совпадает с верхней, левой и правой сторонами страницы. Тело занимает остальную часть страницы и имеет отступ 10 пикселей с каждой стороны. Обратите внимание, что объявление DOCTYPE (первая строка) необходимо.

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

0 голосов
/ 09 марта 2010

Там много кода, чтобы посмотреть там, и, как указано в комментарии, я получил «ошибку TLDR» при попытке прочитать его.
Тем не менее, по моему опыту, когда дела идут "неправильно", это потому, что HTML слишком сложный, есть некоторые несбалансированные элементы, или есть элементы, которые пропускают закрытие.
Начните с рассмотрения, и если все это работает, вы можете попробовать использовать фреймворк, в ExtJS и YUI есть менеджеры компоновки, которые достигают именно того, что вы ищете, хотя они могут быть довольно тяжелым решением.

YUI Менеджер по раскладке: http://developer.yahoo.com/yui/layout/
Менеджер по раскладке ExtJS: http://www.extjs.com/deploy/dev/examples/layout/complex.html

...