Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » HTML: <TABLE HEIGHT=100%>/Таблица на всю высоту экрана

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4

Открыть новую тему     Написать ответ в эту тему

pusiyjan



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
UncleYurka
У меня тоже небольшая проблема. Делаю форму которая состоит из 3х фреймов, первый, второй и третий самый большой. Вот что-то такое..
:----------------:
: форма табл  :
------------------
: шапка табл  :
------------------
:    данные     :
:     табл        :
:                    :
------------------
После нескольких добавлений столбцов таблицы была получена довольно громосткая таблица. Как мне получить горизонтальную полосу прокрутки в нижнем и среднем фрейме?
 
 
Добавлено:
за вертикальный скролинг отвечает вот эта часть а за горизонтальный

Код:
 
<frame src="http://www/cgi-bin/testirovanie/vvod.cgi" name="top" scroling="NO">
<frame src="http://www/testirovanie/niz.html" name="niz" scroling="yes">
 

?

Всего записей: 823 | Зарегистр. 17-12-2003 | Отправлено: 12:49 16-11-2006
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
pusiyjan

Цитата:
После нескольких добавлений столбцов таблицы была получена довольно громосткая таблица. Как мне получить горизонтальную полосу прокрутки в нижнем и среднем фрейме?  

для чего? все равно не будет скроллироваться одновременно с остальными частями.
так что значит "получить"? добавь невидимый элемент за переделами страницы и получишь.
 

Цитата:
scroling="

с двумя l пишется.
 

Цитата:
громосткая

громоздкая
 


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 19:03 16-11-2006
hABi2aL



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
кароче я для себя проблему решил так - на форме есть два дива, вот такой использую стартап скрипт
string loadScript = "<script>function OnLoad() {{var table = document.getElementById('{0}'); var panel = document.getElementById('{1}'); table.style.height = panel.style.height = document.documentElement.clientHeight - document.getElementById('top').clientHeight - document.getElementById('middle').clientHeight  - document.getElementById('footer').clientHeight - 35;  }} window.onload = OnLoad; window.onresize= OnLoad;</script>";
 
 
 
Добавлено:
не самый удобный способ - но действенный)))))))

Всего записей: 40 | Зарегистр. 27-10-2005 | Отправлено: 14:18 24-11-2006
AXVill



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Help!
И так, у нас есть таблица, которая должна быть height=100%.
Выглядит эта няга так:

Код:
CSS:
*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%; /* Дабы был родительский height для таблицы */
}
#my_table{
    height: 100%; /* Собственно - 100% h у таблицы */
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- Про использование HTML 4.01 читал выше, но со всем, написанным здесь, работало круто и как xhtml, validator оценил как "все-ОК" -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
<table id="my_table" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" height="100%"> <!-- Здесь 100 дабы разъезжалась эта ячейка а не нижние -->
            ...
        </td>
    </tr>
    <tr>
        <td>
            ...
        </td>
...  
<!-- Дальше по смыслу -->  
 

Все, вроде, вкусно, все тип-топ, во всех браузерах одинаково... было.
Заглянул в IE7.
Произошел конфликт html & body 100% height.
У страницы появился один экран пустой и на экран ниже таблица.
Если заменить в CSS html,body на просто body - все ок, но таблица не получает от родителя height, следовательно - не растягивается.
Мои идеи закончились...
Кто подскажет как лечить? Doctype - крайняк...
PS. Microsoft-sucks!
2Cherry: Сорри, хотел отделить - у меня вопрос конкретно по IE7...

Всего записей: 320 | Зарегистр. 22-09-2005 | Отправлено: 05:44 19-02-2007
Ternik



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
AXVill
стандартная модель, работает вроде бы везде...  
[small]не юзать у тэгов атрибутов оформления![/small]
 

Код:
 
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
 html { height: 100%; width: 100%; padding: 0; margin: 0; }
 body { height: 100%; width: 100%; padding: 0; margin: 0; }
 table { height: 100%; width: 100%; border: 0; border-collapse: collapse; }
 table tr { height: 100%; border-collapse: collapse; }
 table td { height: 100%; border-collapse: collapse; }
</style>
<title></title>
</head>
<body>
 <table>
  <tr>
   <td>=)</td>
  </tr>
 </table>
</body>
</html>
 

 
а что вот это у тебя такое?

Код:
 
 *{
    margin: 0;
    padding: 0;
}  
 

Всего записей: 763 | Зарегистр. 25-09-2002 | Отправлено: 10:59 19-02-2007
AXVill



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
2Ternik:
Такая связка не работает
Если будет больше чем одна строка, один столбец.
IE7 делает каждую строку на 100% экрана.
А вот это

Код:
*{
     margin: 0;
     padding: 0;
}

Избавляет от кроссплатформенных закидонов.
Ставит default margin & padding в значение 0.
Конечно, приходится всем элементам, которым по моим планам margin & padding не 0, прописывать его ручками в CSS, что делает больше кода, но это лучше чем произвольно "разъезжающиеся" дизайны. Мне кто-то из знакомых давным-давно этой пижней очень помог.
 
Добавлено:
Пока решил проблему сменой DOCTYPE на
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
Кто же найдет решение?

Всего записей: 320 | Зарегистр. 22-09-2005 | Отправлено: 20:28 19-02-2007 | Исправлено: AXVill, 00:56 20-02-2007
Ternik



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
IE7 делает каждую строку на 100% экрана.

дык конечно, ты укажи 100% у той, которую надо растянуть на всю высоту, а у остальных указывай в пикселях!

Всего записей: 763 | Зарегистр. 25-09-2002 | Отправлено: 12:34 20-02-2007 | Исправлено: Ternik, 12:39 20-02-2007
AXVill



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Не-а.
Дело не в этом. При doctype XHTML height 100% задается для ячейки как 100% экрана...
Только в IE7!

Всего записей: 320 | Зарегистр. 22-09-2005 | Отправлено: 02:13 21-02-2007 | Исправлено: AXVill, 02:14 21-02-2007
Alex0000004



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Попробуй написать так:
<table>
<tr>
<td height=100%>
</td>
</tr>
</table>

Всего записей: 2 | Зарегистр. 14-03-2007 | Отправлено: 13:56 14-03-2007
slavpa



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Должно работать везде (кроме МАК ехплорера) и валидно :

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Standards Compliance Mode with CSS Rendering</title>
<style type="text/css">
body {
    color:#000;  
    background-color: #fff;
}
html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
}
#wrapper {
    background-color: #ccccff;
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    width: 400px;
}
</style>
</head>
<body>
<table id="wrapper">
  <tr>
     <td>
       <p align="center">The table </p>
       <p align="center">
        <a href="http://validator.w3.org/#validate_by_input+with_options" target="_blank">Validate the HTML of page</a><br>
         <a href="http://jigsaw.w3.org/css-validator/#validate-by-input" target="_blank">Validate the CSS of page</a><br>
         <a href="javascript:close()">Close this window</a></p>
   </td>
 </tr>
</table>
</body>
</html>

Всего записей: 2010 | Зарегистр. 05-02-2003 | Отправлено: 12:57 10-11-2007
andzej1

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
slavpa

Этот код действительно отображает таблицу во весь экран (по высоте), НО В IE ИМЕЕТСЯ ПРОБЛЕМА:
Если, к примеру, я хочу добавить еще одну строчку в таблице с фиксированной высотой 45px, а вторая пускай так и будет занимать весь оставшийся экран. Внеся небольшие изменения в ввыше указанный код, этого легко можно добится во всех браузерах КРОМЕ IE!!!!!.
 
Вот измененный код:

Код:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Standards Compliance Mode with CSS Rendering</title>
<style type="text/css">
body {
    color:#000;  
    background-color: #fff;
}
html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
}
#wrapper,
#wrapper td
{
    background-color: #ccccff;
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    width: 400px;
    border: 1px solid #000;
}
 
.small{
    height: 40px;
}
 
.full_height{
    height: 100%;
}
</style>
</head>
<body>
<table id="wrapper">
    <tr>
        <td class="small">aaa</td>
    </tr>
  <tr>
     <td class="full_height">
       <p align="center">The table </p>
       <p align="center">
        <a href="http://validator.w3.org/#validate_by_input+with_options" target="_blank">Validate the HTML of page</a><br>
         <a href="http://jigsaw.w3.org/css-validator/#validate-by-input" target="_blank">Validate the CSS of page</a><br>
         <a href="javascript:close()">Close this window</a></p>
   </td>
 </tr>
</table>
</body>
</html>
 

 
1) Если указываю высоту строк 45px и 100% соответсвенно, то в IE таблица выходит за пределы видимого пространства.
2) Если указать высоту только первой строки 45px, то в IE таблица отображается корректно, но высота строк какимто неадекватным образом делится по экрану.
 
В первом и втором случае во всех остальных браузерах таблица отображается правильно, но в IE это какой-то глюк! Что можно сделать для IE, кроме того, как написать милое, с наилучшими пожеланиями, рождественское письмо дяде ГЕЙтцу?

Всего записей: 76 | Зарегистр. 19-09-2005 | Отправлено: 14:17 14-12-2007
slavpa



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andzej1
 

Код:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>Standards Compliance Mode with CSS Rendering</title>  
<style type="text/css">  
body {
    color:#000;
    background-color: #fff;
    font-size: 9px;
}  
html, body, #wrapper {  
    height:100%;  
    margin: 0;  
    padding: 0;  
    border: 0;  
    vertical-align: top;
}  
#wrapper {  
    background-color: #ccccff;  
    margin: 0 auto;  
    width: 400px;  
}
#small10 {
    background-color: #aaa;
    height: 10px;
}  
#small20 {
    background-color: #000099;
    height: 30px;
}
#small30 {
    background-color: #CC0000;
    height: 30px;
}
 
</style>  
</head>  
<body>  
<table id="wrapper">
 <tr>  
     <td valign="top">
     <div id="small10"> 10 px </div><div id="small20"> 20 px </div><div id="small30"> 30 px </div>
       <p>  
        <a href="http://validator.w3.org/#validate_by_input+with_options" target="_blank">Validate the HTML of page</a><br>  
         <a href="http://jigsaw.w3.org/css-validator/#validate-by-input" target="_blank">Validate the CSS of page</a><br>  
         <a href="javascript:close()">Close this window</a></p>  
   </td>  
 </tr>  
 
</table>  
</body>  
</html>  
 

Всего записей: 2010 | Зарегистр. 05-02-2003 | Отправлено: 21:40 20-02-2008 | Исправлено: slavpa, 21:41 20-02-2008
Rick_Ross

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
slavpa
Все рабоает, спасибо! Вот только как сделать, чтобы оно по вертикали не растягивалось? Дивы я не применяю, vertical-align для боди, хтмл и valign=top для каждой ячейки указываю

Всего записей: 52 | Зарегистр. 22-03-2009 | Отправлено: 20:35 21-04-2009
Rick_Ross

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А как запретить ячейке растягиваться в высоту????
А то у меня есть ячейка с height=300 style='style:300px' и ячейка с height=100% style='height:100%', но они все равно растягиваются по половине экрана каждая.. а нужно только нижнюю растянуть
 
Добавлено:
Забыл сказать про структуру:
 
.a{height:100%}
.b{height:100px;}
<table height=100% class=a><tr>
<td colspan=2 class=b>Это растягиваться не должно - шапка!!!</td>
</tr><tr>
<td width=10></td>
<td width=200 class=a>А вот это должно - контент</td>
</tr>
</table>

Всего записей: 52 | Зарегистр. 22-03-2009 | Отправлено: 00:25 24-04-2009
slavpa



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Сильно не вникал, (может на следующей неделе...)  
но дивы-то чем не нравятся? Или какие-то специфичные потребности по верстке?
 
Добавлено> дай типа картинок что-ли, что получается и что должно быть ....
а то что-то не вьеду в вопрос (сегодня по крайней мере)

Всего записей: 2010 | Зарегистр. 05-02-2003 | Отправлено: 17:02 24-04-2009 | Исправлено: slavpa, 17:36 24-04-2009
Grafus



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Народ пособите с вопросом подгона высоты дива под визуальную область браузера. А именно,у меня есть таблица обобщим ее так:

Код:
 
<table>
<tr>тут хеадер с заданной высотой в пискелах</tr>
<tr>
<td>тут менюшка и ее высота особо не важна</td>
<td><div>тут контент и собственно его высоту нужно задать</div></td>
</tr>
<tr>тут футер с заданной высотой в пискелах</tr>
</table>
 

Собстно высоту контента будет определять див.
Высоту дива же нужно расчитать из формулы:

Код:
 
"высота видимой области экрана браузера" - "высота хеадера" - "высота футера" = "высота дива"
 

Пособите осуществить сию операцию, пологаю сие нана писаль на жаба скрипте, а я в нем не силен.

Всего записей: 392 | Зарегистр. 15-12-2004 | Отправлено: 12:28 25-01-2011
BlackVetal



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Grafus
примерно так  

Код:
 
<table border=1px height=100%>  
    <tr height=100px>
        <td>тут хеадер с заданной высотой в пискелах</td>
    </tr>  
    <tr height=100%>  
        <td>тут менюшка и ее высота особо не важна</td>  
        <td><div>тут контент и собственно его высоту нужно задать</div></td>  
    </tr>  
    <tr height=100px>
        <td>тут футер с заданной высотой в пискелах</td>
    </tr>  
</table>
 

Всего записей: 1094 | Зарегистр. 13-11-2005 | Отправлено: 06:53 26-01-2011
Grafus



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
BlackVetal
Тогда идет растягивание на 100% плюс 200px.

Всего записей: 392 | Зарегистр. 15-12-2004 | Отправлено: 09:14 26-01-2011
Kaylang



Вредный и упрямый
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Grafus

Цитата:
Народ пособите с вопросом подгона высоты дива под визуальную область браузера. А именно,у меня есть таблица обобщим ее так:

Зачем таблица? Рекомендую делать одними только дивами. Вариантов под твои нужды несколько.

Всего записей: 38546 | Зарегистр. 29-08-2002 | Отправлено: 16:27 26-01-2011
BlackVetal



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Grafus
Опера и ослик (лисы нет для проверки) - показывает все на экране - без прокрутки ... в каком браузере ты проверял?

Всего записей: 1094 | Зарегистр. 13-11-2005 | Отправлено: 06:57 27-01-2011
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4

Компьютерный форум Ru.Board » Интернет » Web-программирование » HTML: <TABLE HEIGHT=100%>/Таблица на всю высоту экрана


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru