Растяжка ТД - PullRequest
Новая
       4

Растяжка ТД

1 голос
/ 28 сентября 2010

У меня есть макет, где мне нужны вкладки вверху и контент, чтобы заполнить оставшееся пространство.Поэтому, чтобы растянуть нижнюю часть содержимого div, мне нужно иметь: 

style="height:100% - 20px;"

Где 20px - высота моих вкладок.Очевидно, что этот код недействителен, но он иллюстрирует мою точку зрения.Далее я попытался найти таблицу, в которой у td в первой строке tr была заданная высота (20 пикселей), а у td в нижнем ряду не было заданной высоты.Таблица была установлена ​​на 100% в обе стороны.И это работает, дно тд растягивается для заполнения.Однако, как только я помещаю код в проект, над которым я работаю, он не работает, и это из-за того, что проект использует проект (который я не могу изменить): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ПричинаЯ говорю, что это не работает, так как внутри этого содержимого td есть div, установленный на 100% ширины и высоты, и, если td его in не имеет определенной высоты, он, похоже, не сможет увидеть, что такое 100%,и просто настраивает минимальный размер, который может быть в соответствии с его содержимым.

Это не обязательно должен быть макет таблицы, я бы на самом деле предпочел div - но в любом случае.

Спасибо

Ответы [ 4 ]

1 голос
/ 28 сентября 2010

Помогает ли это?

http://www.themaninblue.com/writing/perspective/2005/08/29/

Я знаю, что это в основном связано с нижним колонтитулом, но побочным эффектом является растяжение содержимого до 100% высоты.

0 голосов
/ 28 сентября 2010

Попробуйте установить высоту элементов tr вместо td (в IE6 все равно не будет работать).
Или попробуйте что-то вроде этого: 

<style type="text/css">
    html, body, .wrapper {
        height: 100%;
        width: 100%;    
        margin: 0;
    }
.head {
        height: 20px;
    }
</style>
<div class="wrapper">
    <div class="head">header</div>
    <p>content</p>
</div>
0 голосов
/ 28 сентября 2010

Я не знаю, если это то, что вы ищете (так как я не совсем понимаю ваши потребности, и у вас есть так много аддонов jQuery для этого ...)

вы пробовали 

<table width="100%" height="100%">
    <tr style="height:20px; display:block;">
        <td>pwet</td>
        <td>test</td>
    </tr>
    <tr style="height:100%;width:100%;">
        <td style="background:red; width:50%;"></td>
        <td style="background:blue; width:50%;"></td>
    </tr>
</table>

РЕДАКТИРОВАТЬ : Поскольку вы используете таблицу, td от первого tr должен быть th, а первый tr должен быть заключен в thead

0 голосов
/ 28 сентября 2010

Насколько я понял ваш вопрос, использование таблицы для чего-либо, кроме табличных данных, является серьезной запретной областью.

Проверьте этот скрипт Dynamic Drive для содержимого с вкладками статья,это может вам очень помочь :)

Редактировать: 

<div>
    <h4>Heading</h4>
    <div>

        <ul>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
        </ul>

        <div>Content for Tab 1</div>
        <div>Content for Tab 2</div>
        <div>Content for Tab 3</div>

    </div>

</div>

Я считаю, что это гораздо лучший способ выложить это, тогда все это завернут водин div, который может определить его собственную высоту:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...