Как подогнать содержимое ячейки по высоте - HTML и CSS

ПУГВ · 26.03.2009, 17:09

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

Код:

<html>
<head>
<link rel="stylesheet" href="qq.css" type="text/css" />
</head>
<body>
<table id="menu_cont" cellpading="0" cellspacing="0">
<tr>
<td>
 <ul>

  <li><a href="#">Пункт меню 1</a></li>
  <li><a href="#">Пункт меню 2</a></li>
  <li><a href="#">Пункт меню 3</a></li>
  <li><a href="#">Пункт меню 4</a></li>
  <li><a href="#">Пункт меню 5</a></li>
  <li><a href="#">Пункт меню 6</a></li>
  <li><a href="#">Пункт меню 7</a></li>
  </ul>
</td>
<td>
<form>
<input type="text" value="Поиск..." />
</form>
</td>
</tr>
</table>
</body>

При уменьшении размеров окна браузера меню расползается на 2 (или более) строки. При этом формочка остается прежней высоты. Можно ли это как-то исправить?

Текущие стили:

Код:

#menu_cont ul {
 font-size: 0.85em;
 margin: 0;
 padding: 0;
 list-style: none;
}
#menu_cont li {
 display: inline;
 float: left;
}
#menu_cont li a {
 display: block;	
 padding: 7px 20px;
 color: #003388;
 background-color: #EEEEEE;
 border-right: solid #AAAAAA 1px;
}
#menu_cont li a:hover {
 display: block;	
 padding: 7px 20px;
 color: #333;
 background-color: #FFEEEE;
}
#menu_cont li span {
 display: block;	
 padding: 6px 20px;
 color: #555;
 background-color: #e8e8e8; 
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin-right: 2px;
}

input {
 font-size: 0.85em;
 border: none;
 background-color: #EEEEEE;
 padding: 7px 20px;
}
#menu_cont {
 overflow: hidden;
 display: block;
 border-top: solid #DDDDDD 1px;
 border-bottom: solid #DDDDDD 1px;
}
td {
 vertical-align: top;
 margin: 0;
 padding: 0;
 height: 100%;
}
form {
 margin: 0;
 padding: 0;
 height: 100%;
}

jeka5555 · 27.03.2009, 10:57

тебе нужно что бы меню не переносилось на другие строки или что?

ПУГВ · 27.03.2009, 16:38

Нет, мне нужно чтобы оно переносилось, но при этом форма поиска (а точнее input в ней) становился такой же высоты, как и меню (в 2 строки и т.д.).

Deight · 28.03.2009, 03:46

А вы не пробовали height:100% для input? По идее это то что вам нужно.

ПУГВ · 28.03.2009, 18:19

Да, действительно, height:100% для input помог. Спасибо! В голову не приходило, пробовал для form, не помогало...

28.03.2009, 03:46	#4
Deight Бредовый Форумчанин Регистрация: 15.11.2008 Сообщений: 285	А вы не пробовали height:100% для input? По идее это то что вам нужно. Чем точнее и проще задан вопрос, тем проще на него получить точный ответ.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Некликабельная область (содержимое как фон)	alex-ks	HTML и CSS	13	05.02.2009 21:28
Как просмотреть содержимое dll	Shavminator	Общие вопросы Delphi	7	12.07.2008 14:11
Как получить содержимое папки ?	- fenix -	Помощь студентам	4	19.04.2008 06:25
Как разделить число и текст в одной ячейки на две ячейки.	neboskreb	Microsoft Office Excel	2	15.04.2008 19:39
Как распечатать содержимое канвы Image?	ffo	Помощь студентам	1	15.03.2007 20:07

27.03.2009, 10:57	#2
jeka5555 Пользователь Регистрация: 20.03.2009 Сообщений: 43	тебе нужно что бы меню не переносилось на другие строки или что?

27.03.2009, 16:38	#3
ПУГВ Регистрация: 26.03.2009 Сообщений: 3	Нет, мне нужно чтобы оно переносилось, но при этом форма поиска (а точнее input в ней) становился такой же высоты, как и меню (в 2 строки и т.д.).

28.03.2009, 18:19	#5
ПУГВ Регистрация: 26.03.2009 Сообщений: 3	Да, действительно, height:100% для input помог. Спасибо! В голову не приходило, пробовал для form, не помогало...