Емулиране на рендиране на таблица в режим на странности

Нашето приложение използва масово таблици за оформление и позициониране и в миналото беше само IE (режим на quirks). Продължавайки напред, ние се опитваме да излезем от режима на странности и да заменим таблиците с div и по-семантично оформление.

Единственото нещо, което ни спира, е „функция“ на режима на странности, която ни позволи да зададем height=100% на ред от таблица и редът да заеме оставащото вертикално пространство. Досега не сме успели да намерим начин да направим това извън режима на странности, със или без таблици.

Това е кодът, който използваме в тялото на страницата. Тук не е показан стил, но ефектът е същият:

<table width="100%" height="100%" border="0">
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <th>This is my header bar</th>
                </tr>
            </table>
        </td>
    </tr>
    <tr height="100%">
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my main section bar</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my footer bar</th>
                </tr>
            </table>
        </td>
    </tr>

This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:

Рендиране в режим на странности

Стандартният режим изобразява същия код по следния начин:

Стандартни режими

jsFiddle с кода: http://jsfiddle.net/RBeWN/3/ (Имайте предвид, че поради към iFrames и т.н. кодът всъщност няма да се изобрази в режим на quirks на jsFiddle, но можете да го принудите с помощта на Dev Tools).

Опитах се да направя това с divs и малко css, но не работи: http://jsfiddle.net/BVMhR/3/. Задаването на основния div на height: 100%; му дава същата височина като неговия родител, вместо да го кара да заема оставащото място. Настройката box-sizing: border-box; също няма значение за това.

Може ли някой да ми помогне да намеря решение на този проблем? Бих искал да мога да го направя без javascript, ако изобщо е възможно, но ако Javascript е необходим, той трябва да бъде общо решение, което може да работи на всяка страница, така че да няма твърде много разходи за разработка за настройването му.


html css height quirks-mode
person a_m0d    schedule 23.08.2012    source източник
comment
Искате ли просто долният колонтитул да се придържа към долната част на страницата, или трябва основното съдържание да е вертикално центрирано?   -  person Kristóf Dombi    schedule 24.08.2012
comment
@KristófDombi Долният колонтитул ще стои под основното съдържание, но няма да залепне в долната част на страницата. Ако съдържанието е твърде дълго, то ще бъде обвито в друг div и превъртено.   -  person a_m0d    schedule 24.08.2012

Отговори (4)


arrow_upward
2
arrow_downward

След като си поиграх с доста различни оформления и изясних някои специфики по отношение на изискванията, намерих начин да направя това с чист CSS.

Това включва познаване на височините както на горния, така и на долния ред (въпреки че те могат да бъдат посочени в %), а също така включва няколко допълнителни слоя div.

Моят пример може да бъде намерен в този jsFiddle. Забележете, че при разширяване/свиване на прозореца средният ред се преоразмерява по подходящ начин. Възможно е също да направите това в превъртащ се div, ако е необходимо (с overflow: auto), така че съдържанието да се превърта, когато е твърде дълго.

Чувствайте се свободни да се свържете с мен с допълнителни въпроси относно това оформление, ако е необходимо.

person a_m0d    schedule 24.08.2012
comment
Хоризонталната лента за превъртане е малко странна, но не мога да разбера как е принудена да се появи... - person Roddy of the Frozen Peas; 24.08.2012
comment
Вижте моята корекция за хоризонталната лента за превъртане в моята редакция на моя отговор. - person Gus; 24.08.2012

arrow_upward
2
arrow_downward

Не мисля, че това може да се реши с чист CSS.

http://jsfiddle.net/AZcZx/10/

Ето как бих го направил с javascript... Някак си предполагам въз основа на имената ви за div, че това е начинът, по който вашите страници обработват заглавката, съдържанието, долния колонтитул и затова това трябва да е достатъчно общо за това.

Добавих граници/полета, за да покажа, че там има крайни букви, с които jQuery помага чудесно... Предполагам също, че вертикалното центриране на съдържанието във вашия пример за quirks-mode не е част от въпроса.

РЕДАКТИРАНЕ:

Поправям се. Може да се направи с CSS, въпреки че създава проблем с ширината, който не беше съвсем тривиален за коригиране, така че ето решението за това:

http://jsfiddle.net/AZcZx/27/

person Gus    schedule 23.08.2012
comment
Гас, наистина успях да разреша този проблем с чист CSS - вижте отговора ми по-горе за това как го направих. - person a_m0d; 24.08.2012
comment

Можете да използвате метода ForEach на класа List.

ordersList.ForEach(oi => oi.TYPE = oi.TYPE == "P" ? "Project" : "Support" );

Ако искате да имате метод ForEach в тип IEnumerable, можете да създадете свое собствено разширение ForEach

public static void ForEach<T>(this IEnumerable<T> en, Action<T> action)
{
    foreach(T item in en)
    {
        action(item);
    }
}
- person Gus; 24.08.2012
comment
Лоши новини... Започнах да си играя с инструментите за разработчици на IE и превключване на режими... режимът на quirks и IE 7 изглежда влошават CSS версиите малко повече от моята версия на javascript, така че предполагам, че зависи от това колко силно искате да поддържате по-стари браузъри. - person Gus; 24.08.2012

arrow_upward
1
arrow_downward

@xcrypt: Както казва Сет Карнеги, зависи от изпълнението; но най-общо казано, не бих очаквал изпълнението на typeid да се различава значително от използването на виртуални функции. Така че това е проблем на софтуерното инженерство, а не проблем с производителността.
person Miss A    schedule 23.08.2012

arrow_upward
0
arrow_downward

Трябва да разширите тялото и HTML до 100%, за да работи това. "height:100%" прави елемент 100% от неговия родител. Без определен размер на родителя, той ще бъде толкова голям, колкото неговите деца.

body, html {height:100%}
person Diodeus - James MacFarlane    schedule 23.08.2012
comment
Ако погледнете jsfiddle, който публикувах в края, направих това. Както казах, правенето на това прави divMain същата височина като неговия родител, вместо да заема оставащото място. - person a_m0d; 23.08.2012
comment
Опитайте това: #divMain { height: 100%; border:1px solid #ff0000 } - person Diodeus - James MacFarlane; 23.08.2012
comment
Това просто рисува червена кутия със същия размер като документа, в средата на документа. Какво очакваше да направи? jsfiddle.net/BVMhR/4 - person a_m0d; 24.08.2012