Jump to content
  • 0

Вертикальное растягивание

rus

Asked by rus,

 Share

Question

rus Explorer

rus

Posted
Posted (edited)

В левом и правом блоке есть бэк, они оба должны тянуться по вертикали, но не тянутся...

<div id="left_blok"></div>

<div id="right_blok"></div>

html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>
<body>
<div id="wrap">
<div id="heder">
<h1><a href="index.html">Имя Сайта</a></h1>
<div class="bg_menu"></div>
<div class="figura_1"></div>
<div class="menu">
<ul>
<li><a href="#">Новости</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">О Нас</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Заголовок Описание Контента:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="footer"><p>Copyright  2007–2008 ©</p></div>
</div>
<div id="left_blok"></div>
<div id="right_blok"></div>
<div class="figura_2"></div>
</div>
</body>
</html>

css:


<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrap {
height:auto !important;
min-height:100%;
height:100%;
position:relative;
min-width:800px;
}
#left_blok {
background:url(bg_fon.gif) repeat;
width:20%;
position:absolute;
top:0;
left:0;
bottom:0;
height:100%;
}
#right_blok {
background:url(bg_fon.gif) repeat;
width:20%;
position:absolute;
top:0;
right:0;
bottom:0;
height:100%;
}
#heder {
min-width:800px;
position:absolute;
top:0;
left:10%;
right:10%;
z-index:2;
text-align:center;
}
#heder h1 {
font: bold 50px Verdana;
text-decoration: none;
color:#484746;
position:absolute;
margin:0;
padding-left:125px;
}
#heder h1 a {
font: bold 50px Verdana;
text-decoration: none;
color:#484746;
position:absolute;
margin:0;
padding-left:125px;
}
.bg_menu {
position:relative;
top:70px;
background:url(bg_menu.jpg) repeat-x;
width:100%;
height:24px;
}
.menu {
position:absolute;
top:90px;
left:250px;
height:62px;
}
.menu ul {
list-style: none;
margin:0;
padding:0;
}
.menu ul li {
background:url(menu.gif) no-repeat;
width:151px;
height:62px;
float:left;
display:block;
margin-right:10px;
}
.menu ul li a {
font: normal 20px  Verdana;
color:#484746;
text-decoration: none;
line-height:60px;
white-space:nowrap;
}
.menu ul li a:hover {
font: normal 20px  Verdana;
color:#E67817;
text-decoration: underline;
line-height:60px;
}
.figura_1 {
background:url(figura1.gif) no-repeat;
position:absolute;
top:60px;
left:50px;
width:115px;
height:127px;
}
#content {
background-color:#FFFFFF;
position: absolute;
padding:200px 10px 10px 10px;
z-index:1;
left:10%;
right:10%;
height: 100%;
min-width:800px;
}
#footer {
position: adsolute;
margin-top:50px;
height: 50px;
background:#81BAE7;
bottom:0;
}
#footer p {
font: normal 12px  Verdana;
text-align:center;
color:#FFFFFF;
padding-top:5px;
}
.figura_2 {
background:url(figura2.gif) no-repeat;
position:absolute;
bottom:0;
left:0;
width:121px;
height:255px;
}
</style>

Вариант со скроллом лучше не предлагать.

При большом контенте должны тянуться левый и правый блоки.

Понятное дело что руки кривые и все тут просто, но..., чайник кипит от того что не могу справиться и это очень печально. :)

Edited by rus
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Anami Explorer

Anami

Posted
Posted (edited)

Изрядно помучав код могу выдать это:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Документ без названия</title>
	<style type="text/css">
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrap {
height:auto !important;
min-height:100%;
height:100%;
position:relative;
min-width:800px;
}
#content {
background-color:#FFFFFF;
padding:200px 10px 10px 10px;
z-index:1;
margin-left:10%;
margin-right:10%;
min-width:800px;
position:relative;
min-height:100%;
}

#left_blok {
background:url(resource/pager_bg.jpg) repeat;
width:10%;
position:absolute;
top:0;
left:0;
bottom:0;
height:100%;
}

#right_blok {
background:url(resource/pager_bg.jpg) repeat;
width:10%;
position:absolute;
top:0;
right:0;
bottom:0;
height:100%;
}
#heder {
min-width:800px;
position:absolute;
top:0;
left:10%;
right:10%;
z-index:2;
text-align:center;
}
#heder h1 {
font: bold 50px Verdana;
text-decoration: none;
color:#484746;
position:absolute;
margin:0;
padding-left:125px;
}
#heder h1 a {
font: bold 50px Verdana;
text-decoration: none;
color:#484746;
position:absolute;
margin:0;
padding-left:125px;
}
.bg_menu {
position:relative;
top:70px;
background:url(bg_menu.jpg) repeat-x;
width:100%;
height:24px;
}
.menu {
position:absolute;
top:90px;
left:250px;
height:62px;
}
.menu ul {
list-style: none;
margin:0;
padding:0;
}
.menu ul li {
background:url(menu.gif) no-repeat;
width:151px;
height:62px;
float:left;
display:block;
margin-right:10px;
}
.menu ul li a {
font: normal 20px Verdana;
color:#484746;
text-decoration: none;
line-height:60px;
white-space:nowrap;
}
.menu ul li a:hover {
font: normal 20px Verdana;
color:#E67817;
text-decoration: underline;
line-height:60px;
}
.figura_1 {
background:url(figura1.gif) no-repeat;
position:absolute;
top:60px;
left:50px;
width:115px;
height:127px;
}

#footer {
position: adsolute;
margin-top:50px;
height: 50px;
background:#81BAE7;
bottom:0;
}
#footer p {
font: normal 12px Verdana;
text-align:center;
color:#FFFFFF;
padding-top:5px;
}
.figura_2 {
background:url(figura2.gif) no-repeat;
position:absolute;
bottom:0;
left:0;
width:121px;
height:255px;
}
</style>
</head>
<body>
	<div id="wrap">
		<div id="heder">
			<h1>
				<a href="index.html">Имя Сайта</a></h1>
			<div class="bg_menu">
			</div>
			<div class="figura_1">
			</div>
			<div class="menu">
				<ul>
					<li><a href="#">Новости</a></li>
					<li><a href="#">Видео</a></li>
					<li><a href="#">О Нас</a></li>
				</ul>
			</div>
		</div>
		<div id="content">
			<h1>
				Заголовок Описание Контента:</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
				irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum.</p>
			<div id="footer">
				<p>
					Copyright 2007–2008 ©</p>
			</div>
		</div>
		<div id="left_blok">
		</div>
		<div id="right_blok">
		</div>
		<div class="figura_2">
		</div>
	</div>
</body>
</html>

Уже не помню что за классы менялись поэтому привожу все) Одно но, для ие6 пришлось изменить доктайп, так как под вашем доктайпом в нем див на 100% не тянется. Ну может и тянется, но голова уже не варит чтобы найти как =/

Edited by Anami
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept