как сделать 100% высоту?

allod21 · December 29, 2007

Я хочу сделать что бы левый и правый столбец были ограничены линией dotted 1px например... но блоки у меня не фиксированной длины а могут изменяться в зависимости от информации...

@@@@@@@@@

@@ @@ @@

@@

@@@@@@@@@

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14pt;
 color:#fff;
}
a
{
 color: #0077dd;
 text-decoration: underline;
}

a:hover
{
 text-decoration: none;
}

#Container {
 width:100%;
 height:50px;
 z-index:1;
 float: left;
 text-align: center;
 min-width: 800px;
}
#Header {
 width:100%;
 height:199px;
 z-index:1;
 float: left;
 background-image: url(background.gif);
}
/* Menu */

#menu
{
 top: 100px;
 right: 100px;
 float: right;
 margin-right: 50px;
 margin-top: 50px;
}

#menu ul
{
 list-style: none;
}

#menu li
{
 display: inline;
 padding-left: 1.1em;
 margin-left: 1em;
 border-left: dotted 1px #E0E8EF;
}

#menu li.first
{
 border: 0em;
 margin-left: 0em;
 padding-left: 0em;
}

#menu li a
{
 color: #fff;
 padding: 0.1em;
 text-decoration: none;
}

#menu li a:hover
{
 text-decoration: underline;
}

#Footer {
 width:100%;
 height:50px;
 z-index:1;
 float: left;
 background-image: url(background.gif);
}
#Content {
 width:100%;
 height:auto;
 z-index:1;
 float: left;
}

#content h2,h3,h4,h5,h6
{
 color: #545454;
 margin-bottom: 1em;
 border-bottom: dashed 1px #dfdfdf;
 padding-bottom: 0.3em;
}

#content h2
{
 font-size: 1.5em;
}

#content h3
{
 font-size: 1.1em;
}

#ContentLeft {
 width:25%;
 height:auto;
 z-index:1;
 float: left;
}

#ContentRight {
 width:24.9%;
 height:auto;
 z-index:1;
 float: right;
}

#ContentCenter {
 width:50%;
 z-index:1;
 float: left;
 border-right: dotted 1px #000;
}
#ContentCenterOne, contentcentertwo {
 width:100%;
 height:auto;
 z-index:1;
 float: left;
 border-bottom: dotted 1px #000;
 color: #0066FF;
}
#ContentCenterTwo {
 width:100%;
 height:auto;
 z-index:1;
 float: left;
 border-bottom: dotted 1px #000;
 color: #0066FF;
}

#ContentCenterThree {
 width:100%;
 height:auto;
 z-index:1;
 float: left;
}

-->
</style></head>

<body>





<div id="Container">
 <div id="Header">
 <div id="menu">
<ul>
 <li class="first"><a href="#" accesskey="1" title="">Главная</a></li>
 <li><a href="#" accesskey="2" title="">О нас</a></li>
 <li><a href="#" accesskey="3" title="">Контакты</a></li>
 </ul>
 </div>
 </div>
 <div id="Content"> 
 <div id="ContentLeft">
 <h3>Левое блок 1</h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Левое блок 2</h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Левое блок 3</h3>
 <h3> </h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Левое блок 4</h3>
 </div>
 <div id="ContentCenter">
 <div id="ContentCenterOne">
 <marquee behavior="scroll" scrollamount="5" scrolldelay="5" >Здесь будет бегущая строка ?1 Здесь будет бегущая строка ?1</marquee>
 </div>
 <div id="ContentCenterTwo">
 <marquee behavior="scroll" scrollamount="10" scrolldelay="10">Здесь будет бегущая строка ?2 Здесь будет бегущая строка ?2</marquee>
 </div>
 <div id="ContentCenterThree">
 <h3> </h3>
 <h3> </h3>
 <h3>Основное содержание </h3>
 </div> 
 </div>
 <div id="ContentRight"> 
 <h3>Правый блок
 1</h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Правый блок 2</h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Правый блок 3</h3>
 <h3> </h3>
 <h3> </h3>
 <h3>Правый блок 4</h3>
 <h3> </h3>
 <h3> </h3>
 <h3> </h3>
 <h3> </h3>
 </div>
 </div>
 <div id="Footer"> 
 <p> © 2008 <a href="http://validator.w3.org/check?uri=referer">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </p> 
 </div>
</div>
</body>
</html>

klierik · December 29, 2007

не понял сути вопроса

Vlad · December 31, 2007

Я тоже не понял, высоту чего надо сделать.

allod21 · January 2, 2008

высота правого и левого столбца

Vlad · January 3, 2008

Зачем делать высоту блоков одинаковой, когда достаточно просто линию между ними провести. Делаешь так.

#menu {

border-right: 1px solid #000;

}

#content {

border-left: 1px solid #000;

margin-left: -1px;

}

Смысл следующий. У левого блока делаешь линию справа, а у правого - слева. Чтобы не получилось двойной границы, один из блоков надо сместить на один пиксел. Получится, что линии наложатся друг на друга и будет видна только одна полоска, а не две. Так что независимо от высоты блоков, между ними всегда будет граница.

gordi · January 3, 2008

Vlad

Зачем делать высоту блоков одинаковой

Данный метод для трех колоночного варианта не пойдет.

Минусом является и то, что при задании колонкам 2-3-х колоночных макетов разных

background-color или background:url(...) repeat-y, а так же border, ничего путнего не получится.

Возможно, не самые лучшие решения, но при аккуратном использовании лишено перечисленных выше не достатков:

http://trifler.ru/blog/post_1197124402.html

http://trifler.ru/blog/post_1195143636.html

Sign In

как сделать 100% высоту?

Question

allod21

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

allod21

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

gordi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information