растянуть блок до самого низа

JIEXA · June 4, 2007

Нужно растянуть левый блок до самого низа, весь форум перерыл - работающего ответа не нашел. Помогите пожалуйста, вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>сайт</title>
<!--<link rel="stylesheet" type="text/css" media="all" href="base.css">-->
<style>
*{margin:0;padding:0}

html { 
 height: 100%; 
} 

body {
 font-family:Verdana, Helvetica, sans-serif;
 font-size:12px;
 position: relative; 
 height: auto !important; 
 height: 100%;
 min-height: 100%; 
}




.vertmenu li {
 float:left;
 list-style-type:none;
 position:relative;
 font-family: Verdana;
 font-size: 14px;
 color:white;
 background-color: #475153;
 border-left:1px solid #5a6164;
}

.vertmenu a {
 padding-left:20px;
 line-height:50px;
 display:block;
 background: #475153;
 width: 130px;
 height: 50px;
 color:white;
 text-decoration: none;
}

.vertmenu a:hover {
 background: #cccccc;
}
</style>
</head>
<body>

<!-- шапачка -->
<div style='height:100px;width:30%;background-color:#475153;float:left;'></div>
<div style='height:100px;width:70%;margin-left:20%;'></div>

<!-- линия навигации -->
<div style='height:50px;background-color:white;float:left;width:15px;'></div>
<div style='height:50px;background-color:#475153;width:38%;float:left;border-right:1px solid white;'></div>
<div style='height:50px;background-color:#5a6164;margin-left:30px;'>

<div style='margin-left:41%;'>
<ul class='vertmenu'>
<li><a href="#">Ввод</a></li>
<li><a href="#">Вывод</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Наши адреса</a></li>
</ul>
</div>

</div>

<!-- левый нижний угол логотипа -->
<div style='height:75px;width:30%;background:#475153;'></div>


<div style='width:30%;background:#475153;height:100%'>как растянуть этот блок до самого низа? не тянется млин</div>



</body>
</html>

JIEXA · June 5, 2007

Помогите плз

Emm · June 5, 2007

Нужно растянуть левый блок до самого низа

Что мешает растянуть?

JIEXA · June 5, 2007

Вот кусочек кода из приведенного выше:

<div style='width:30%;background:#475153;height:100%'>как растянуть этот блок до самого низа? не тянется млин</div>

так вот, height:100%; не помогает. Он не тянется до самого низа. Пробывал заменять таблице, и ставить там height 100% так там вообще она растягивается намного больше чем до подвала и в итоге появляется скрул и много ненужного места. Я уже замучался, искал по форумам, у многих возникает проблема с height100%, но нигде толком не написано как решить данную проблему.

Emm · June 5, 2007

В body очень много height'тов стоит, проверь?

JIEXA · June 6, 2007

Да, это я в одной статье вычитал, что нужно указать в боди ширину... Но что они, что их нету - разницы никакой :lol:

Scrum · June 6, 2007

а можно для начало посмотреть как все должно выглядеть, а то у меня в разных браузерах разная картинка ?

и если я понял то левый блок должен тянуться до низа без появления скролла ? и должен ли он появляться при переполнение контента ?

JIEXA · June 6, 2007

и если я понял то левый блок должен тянуться до низа без появления скролла ?

Да, именно так.

и должен ли он появляться при переполнение контента ?

Да, при переполнение контента, он должен появится.

Scrum · June 6, 2007

не тянется из-за доктайпа, поменяй на quot;-//W3C//DTD HTML 4.01 Transitional//EN">

немножко доработал твой код (показывает по всем одинаково)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
 <title></title>
 <style type="text/css">
 <!--
 html, body {
 margin: 0;
 padding: 0;
 border: none;
 }

 #head {
 height:100px;
 width:30%;
 background-color:#475153
 }
 #menu {
 float: left;
 width: 100%;
 height: 50px;
 background-color: #5a6164;
 }
 .vertmenu {
 margin-left: 30px;
 float: left;
 }

 .vertmenu ul {
 padding: 0;
 margin: 0;
 list-style-type:none;
 }

 .vertmenu li {
 float:left;
 font-family: Verdana;
 font-size: 14px;
 color:white;
 background-color: #475153;
 border-left:1px solid #5a6164;
}

.vertmenu a {
 padding-left:20px;
 line-height:50px;
 display:block;
 background: #475153;
 width: 130px;
 height: 50px;
 color:white;
 text-decoration: none;
}

.vertmenu a:hover {
 background: #cccccc;

}
 -->
 </style>
</head>

<body>
<div id="head"></div>

<div id="menu">
<div style='height:50px;background-color:white;float:left;width:15px;'></div>
<div style='height:50px;background-color:#475153;width:38%;float:left;border-right:1px solid white;'></div>
<div style='height:50px;background-color:#5a6164;margin-left:30px;'>

<div class='vertmenu'>
<ul>
<li><a href="#">Ввод</a></li>
<li><a href="#">Вывод</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Наши адреса</a></li>
</ul>
</div>

</div>

</div>

<div style='height:75px;width:30%;background:#475153; '></div>
<div style="width:30%;background:#475153;height:77%;">как растянуть этот блок до самого низа? не тянется млин</div>
</body>

</html>

по поводу тянутся до низа без появления скролла это через ЖабуСкрипт

Sign In

растянуть блок до самого низа

Question

JIEXA

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

JIEXA

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

JIEXA

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

JIEXA

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

JIEXA

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information