Имитация фреймов (картинка внутри)

Daikengo · October 20, 2008

Камрады, тут возникла такая вот задачка:

Сайт по дизайну имеет вид примерно такой:

Вверху - контент, внизу - меню. Все в "резине". Контент должен "прокручиваться" независимо от меню, которое вседа будет прилегать к нижнему краю экрана. Для набора "классических" фреймов задача обыденная, однако тут фреймами пользоваться нельзя - вот та менюшка внизу по нажатию на кнопочку должна будет "складываться" в одну строку и соответственно при повторном нажатии обратно "раскрываться" в высоту.

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

Кто-нибудь делал что-то подобное? В какую сторону посмотреть/подсмотреть?

Dimitry Wolotko · October 20, 2008

Меню - футер, прибитый книзу.

Контент - див с overflow

Evclid · December 9, 2008

Меню - футер, прибитый книзу.
Контент - див с overflow

Легко сказать. Я целый день парился с этим - так и не смог.

Либо футер уезжает при контенте болше страницы, либо контент частично уезжает выше нормы, либо как вариант еще было что футер начинался сразу под страницей... Подскажите плз кто-нибудь рабочий пример?

Scrum · December 9, 2008

<!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="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
  }
  #content {
	height: 90%;
	overflow: auto;
  }
  #footer {
	height: 10%;
	background: #404040;
	color: #fff;
  }


  /*]]>*/
  </style>
</head>

<body>
<div id="content">
content
</div>
<div id="footer">footer</div>

</body>

</html>

Evclid · December 9, 2008

2Scrum

#footer {
height: 10%;
background: #404040;
color: #fff;
}

Все бы хорошо - но footer должен иметь не относительную высоту, а абсолютную (30px к примеру). Там же меню.

Соответственно у контента высота - все оставшееся пространство (100% - 30px).

Evclid · December 10, 2008

Решение вижу только в java script:

<!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">
<head><title>
	Page with fixed footer
</title>
    <style>
    *
    {
    	margin:0;
	    padding:0;
    }
    html, body
    {
    	height: 100%;
    	overflow:auto;
    	background-color:#DDFFFF;
    }
    #content
    {
    	background-color:#DDFFFF;
    	overflow:auto;
    }
    #footer
    {
	    position:absolute;
	    bottom:0;
	    background-color:#FFFFDD;
	    height: 60px;
	    width:100%;
    }    
    </style>    
    <script language="javascript" type="text/javascript"><!--
        function FixContentHeight() {
            var content = document.getElementById("content");
            var footer = document.getElementById("footer");
            var height = parseInt(document.body.clientHeight) - parseInt(footer.clientHeight);
            if (height > 0)
                content.style.height = height + "px";
        }
    --></script>
</head>
<body onload="FixContentHeight()" onresize="FixContentHeight()">
    <div id="content">
    <script language="javascript" type="text/javascript"><!--
        var str="";
        for (var i = 0; i < 20; i++) str = str + "<br>content " + i;
        document.writeln(str.substring(4));
    --></script>
    </div>
   <div id="footer">Footer</div>
</body>
</html>

Вдруг кто знает как сделать тоже самое без JS - напишите...

ZoNT · December 10, 2008

была такая задача. Без js не решается никак.

Vlad · December 10, 2008

На CSSPlay красивые примеры имитации работы фреймов через стили.

http://www.cssplay.co.uk/layouts/frame.html

http://www.cssplay.co.uk/layouts/bodyfix.html

http://www.cssplay.co.uk/layouts/body2.html

http://www.cssplay.co.uk/layouts/body4.html

Evclid · December 11, 2008

2Vlad: Спасибо, дружище! Это то что надо!

2ZoNT:

- Видишь суслика?
- Нет...
- И я нет... А он есть...

Ответ копеечный. Надо же было так долго его искать?

<!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">
<head><title>
	Page with fixed footer
</title>
<style>
html, body {margin:0;overflow:hidden;}
#content
{
	position:absolute;
	top:0; bottom:60px; left:0; right:0;
	background-color:#DDFFFF;
	overflow:auto;
}
#footer
{
	position:absolute;
	bottom:0;
	background-color:#FFFFDD;
	height: 60px;
	width:100%;
}
</style>
</head>
<body>
    <div id="content">
    <script language="javascript" type="text/javascript"><!--
        var str="";
        for (var i = 0; i < 20; i++) str = str + "<br>content " + i;
        document.writeln(str.substring(4));
    --></script>
    </div>
   <div id="footer">Footer</div>
</body>
</html>

Всем спасибо (:

WiciN · January 27, 2009

Ивеняюсь за нескромность, мне нужно сделать очень похожую штуку, только не имитировать фрейм, а присандалить снизу div.

Evclid, в твоём втором примере, к сожалению, есть небольшие недочёты.

В IE6 нет полосы прокрутки и прокрутить контент если он по высоте больше окна невозможно, а в FireFox, Safari и других нормальных браузерах полоса прокрутки заканчивается перед началом слоя Footer (это в моём случае не подходит).

А в первом варианте, всё работает во всех браузерах, только в IE полоса прокрутки только на слое content.

А хочется чтоб полоса прокрутки вела себя как на обычных страницах, а div был просто прикреплен в нижней границе. Пример на http://lendmoney.ru/ , там в правом нижнем углу какая-то хрень прикреплена.

Я в этом деле новичок, и всю голову уже поломал. Не могу, подскажите плз.

Во всём подводит грёбаный IE6, действительно хочется уже напечатать этот div и к монитору на ПВА снизу прикрепить...

Edited January 27, 2009 by WiciN

Searcher · January 27, 2009

2Vlad: Спасибо, дружище! Это то что надо!
2ZoNT:Ответ копеечный. Надо же было так долго его искать?
Всем спасибо (:

IE не понимает одновременного указания координат противоположных границ... попробуйте пример, описанный ниже. Или вычисление высоты при помощи expression для IE. А на CSSPlay реализовано все не совсем так, посмотрите на стили внимательнее.

Ивеняюсь за нескромность, мне нужно сделать очень похожую штуку, только не имитировать фрейм, а присандалить снизу div.
Evclid, в твоём втором примере, к сожалению, есть небольшие недочёты.
В IE6 нет полосы прокрутки и прокрутить контент если он по высоте больше окна невозможно, а в FireFox, Safari и других нормальных браузерах полоса прокрутки заканчивается перед началом слоя Footer (это в моём случае не подходит).
А в первом варианте, всё работает во всех браузерах, только в IE полоса прокрутки только на слое content.
А хочется чтоб полоса прокрутки вела себя как на обычных страницах, а div был просто прикреплен в нижней границе. Пример на http://lendmoney.ru/ , там в правом нижнем углу какая-то хрень прикреплена.
Я в этом деле новичок, и всю голову уже поломал. Не могу, подскажите плз.
Во всём подводит грёбаный IE6, действительно хочется уже напечатать этот div и к монитору на ПВА снизу прикрепить...

Это просто:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
	height: 100%;
	width:100%;
	margin: 0;
	background: blue;
	}

#content {
	padding-bottom: 100px;
	}

#footer {
	height: 100px;
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	background: green;
	}

</style>
</head>
<body>
	<div id="content">
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 
		456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789
	</div>
	<div id="footer">
		789
	</div>
</body>
</html>

Хотя это тоже в IE6 не работает... сейчас разберемся...

Edited January 27, 2009 by Searcher

WiciN · January 27, 2009

Хотя это тоже в IE6 не работает... сейчас разберемся...

А у меня это нигде не работает.

Мне бы самому понять, ну в смысле не самому, а именно понять. А просто скопировав код, для самообразования не полезно.

Searcher · January 27, 2009

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

В моем примере сверху, если для #footer задать position:fixed, то работает везде, кроме IE6. В IE6 видимо придется использовать expression, но это плохо.

Может еще кто-нибудь подкинет идею?

Searcher · January 27, 2009

а в примерах на CSSPlay IE6 переключается в квирк режим этой строкой в начале html-файла

WiciN · January 27, 2009

Вот до чего я дошел, ковырял похожие сайты и очищал всё лишнее.

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

<html>
<head>
<title>Страдание над фиксацией</title>
<style type="text/css">
html {height:100%; overflow:hidden;}
body {height:100%; padding:0; margin:0; overflow:auto;}
#footer {position:absolute; width:100%; height:100px; left:0; bottom:0; background:#009955;}
</style>
</head>

<body>
<div>

<div id="footer">Footer</div>

<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<p>h</p>

</div>
</body>
</html>

Получилось почти так как мне нужно, только нижний слой скрывает часть полосы прокрутки. Как это исправить, чтоб полоса прокрутки была на всю страницу одна и ничем не перекрывалась.

И кстати без DOCTYPE почему-то это все не правильно работает ни в нормальных браузерах, ни в IE6! При изменении размера окна - всё в порядке, а при прокрутке страницы - нет.

Edited January 27, 2009 by WiciN

Sign In

Имитация фреймов (картинка внутри)

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information