Как сделать scroll у среднего элемента

botyaslonim · November 10, 2010

Хелп!

Есть такой сайт: http://works.maksimslepov.ru/new.html

Задача так стоит: шапка и подвал всегда должны быть сверху / снизу экрана, при любых разрешениях. Естественно, существует какой-то min-height, допустим, как у меня сейчас.

Между шапкой и подвалом располагается блок. Содержимое блока по высоте - 1500px. Сейчас там фоновая картинка примерно такой высоты.

Не получается вот что: как сделать так, чтобы при маленьком разрешении экрана этот блок скроллился?

В блок main поставил overflow:auto, но результата почему-то нету...

upd. Да, забыл сказать, что сайт должен обязательно располагаться по центру.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Главная</title>
<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
	color: #000000;
}

html 
	{
		height:100%;
	}
body 
	{
		width: 100%;
		min-height:100%;
		height: 100%;
		font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		background:url(images/bg.jpg) top left repeat;	
	}
#wrapper
	{		
		min-height:100%;
		height:auto!important;
		height:100%;
		margin:0 auto -110px;
		overflow:auto;
	}
#main 
	{	
		min-height:600px;	
		text-align: left;
		color: #444444;		
		min-width:1000px;
		overflow:auto;
	}
#mainin
	{
		min-width:1000px;
		padding-bottom:90px;
		height:600px;
		background:url(images/bg_all.png) top center no-repeat;
	}
#top 
	{
		height:78px;	
		background:url(images/head.jpg) -250px 0px no-repeat;
		background-position:center top;
		padding:0;
		margin:0 auto;
	}
#footer 
	{
		height:110px;
		background:url(images/footer.jpg) -250px 0px no-repeat;
		background-position:center top;
		padding:0;
		margin:0 auto;	
	}

</style>
</head>
<body>

<div id="wrapper">	
	<div id='main'>
		<div id="top">
		</div>		  

		<div id="mainin">			  
		</div>		  
	</div>	   
</div>	

<div id='footer'>			
</div>  

</body>
</html>

Edited November 10, 2010 by botyaslonim

Great Rash · November 10, 2010

Чтобы в блоке появился скролл у него должна быть задана минимальная ширина. У вас же везде стоит 100%.

botyaslonim · November 10, 2010

Всё, спасибо большое! Навели на правильную мысль, вопрос решён!

Edited November 10, 2010 by botyaslonim

Sign In

Как сделать scroll у среднего элемента

Question

botyaslonim

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

botyaslonim

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information