как растянуть сайт на весь браузер если на странице мало контента

AlexKon · March 30, 2010

в общем есть вот такое

нужно получить либо такое

либо такое

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

psywalker · March 30, 2010

Первый вариант получить легко, просто этоже обычный подвал всегда внизу, а контент тянеться, т.е. фон на него вешаешь, да и всё.

AlexKon · March 30, 2010

Первый вариант получить легко, просто этоже обычный подвал всегда внизу, а контент тянеться, т.е. фон на него вешаешь, да и всё.

не совсем понял как это, у меня контент тянется в зависимости от содержимого в контент-блоке

Searcher · March 30, 2010

http://www.zakharov.ms/footer/ это читали?

AlexKon · March 30, 2010

http://www.zakharov.ms/footer/ это читали?

да это подошло, спасибо Searcher

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

Searcher · March 30, 2010

Вот хороший вариант, можно его для внутренностей использовать

AlexKon · March 31, 2010

Вот хороший вариант, можно его для внутренностей использовать

да интересный вариант, но немного замудренный

Searcher · March 31, 2010

да интересный вариант, но немного замудренный

За универсальность приходится платить...

psywalker · March 31, 2010

да интересный вариант, но немного замудренный

У тебя задача тоже не лучше.

AlexKon · March 31, 2010

У тебя задача тоже не лучше.

да задача еще та, но к сожалению она достаточно часто встречается, во всяком случае в моей практике

За универсальность приходится платить...

согласен, отлично подходит для сайдбара, а вот для 3 варианта, который я привел, все равно он не подходит,

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

Searcher · March 31, 2010

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

это кстати psywalker уже предлагал

AlexKon · March 31, 2010

Если ширина фиксированная, то создать иллюзию блока на всю высоту можно фоном у родителя.
это кстати psywalker уже предлагал

да, я так и делаю, в данный момен у меня получается в точности как изображено на 2 варианте, те синий фон тянется а в нем лежит желтый контент-блок,

а как растянуть именно желтый контент-блок, который уже лежит в блоке с синим фон, как изображено на 3 варианте

Searcher · March 31, 2010

Так что мешает картинкой сделать фон?! Нарисуйте картинку высотой в 1px и шириной как ширина синего блока и закрасьте желтым левую часть, а синим - правую. Поместите эту картинку с повторением по вертикали в фон синего блока. А синие рамки добавьте у хедера с футером.

мыслите творчески...

AlexKon · March 31, 2010

Так что мешает картинкой сделать фон?! Нарисуйте картинку высотой в 1px и шириной как ширина синего блока и закрасьте желтым левую часть, а синим - правую. Поместите эту картинку с повторением по вертикали в фон синего блока. А синие рамки добавьте у хедера с футером.
мыслите творчески...

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

Searcher · March 31, 2010

можно воспользоваться min-height, но там дальше начнутся сложности...

AlexKon · April 1, 2010

можно воспользоваться min-height, но там дальше начнутся сложности...

пробовал воспользоваться min-height, чет не получается

сейчас пробую может JS поможет

Userhtml · April 14, 2010

Всем доброго времени суток.

Ребята может кто разбирается как сделать чтобы сайт выглядел так http://s51.radikal.ru/i133/1004/d8/de99c2d2af1a.jpg

Edited April 14, 2010 by Userhtml

Justnewone · April 14, 2010

Либо оформляйте посты как следует, с помощью bbcode code /code, либо дайте ссылку.

А вообще, ковыряние в чужом (это точно ен Ваше), бесконтрольном и бессмысленнооформленном коде - самый высокий тариф.

Userhtml · April 14, 2010

Либо оформляйте посты как следует, с помощью bbcode code /code, либо дайте ссылку.
А вообще, ковыряние в чужом (это точно ен Ваше), бесконтрольном и бессмысленнооформленном коде - самый высокий тариф.

Не разбираюсь я в технологии сайтостроения! Просто логически предположил, что дизайн находится в CSS.

Где находятся bbcode code /code и понятия не имею, но со временем разберусь, и надеюсь без Вашей помощи.

Спасибо что не оставили без внимания.

stars · April 14, 2010

Не разбираюсь я в технологии сайтостроения! Просто логически предположил, что дизайн находится в CSS.
Где находятся bbcode code /code и понятия не имею, но со временем разберусь, и надеюсь без Вашей помощи.
Спасибо что не оставили без внимания.

Логически вы на правильном пути за дизайн в большинстве случает действительно css отвечает, только вот где вы собрались это css искать? Если вы потратите минут 30 драгоценного время на простейшие вступления для чайников вам станет известна страшная тайна что свойства css можно описывать как в отдельном файле css так и в самой странице html...

Только вот вам растянут макет надо а не дизайн лепить, за ширину отвечает не только css.

А вообще судя по скрину это какая то cms в которую предлагается растянуть, ну чтож задача в полне реальная не смотря на отвратительный скрин видно что не каких супер решений для растягивания не требуется... займет это от 5 до 60 минут в зависимости как там накручено css за ширину отвечают атрибуты width и одноименные свойства ксс

Userhtml · April 15, 2010

Логически вы на правильном пути за дизайн в большинстве случает действительно css отвечает, только вот где вы собрались это css искать? Если вы потратите минут 30 драгоценного время на простейшие вступления для чайников вам станет известна страшная тайна что свойства css можно описывать как в отдельном файле css так и в самой странице html...
Только вот вам растянут макет надо а не дизайн лепить, за ширину отвечает не только css.
А вообще судя по скрину это какая то cms в которую предлагается растянуть, ну чтож задача в полне реальная не смотря на отвратительный скрин видно что не каких супер решений для растягивания не требуется... займет это от 5 до 60 минут в зависимости как там накручено css за ширину отвечают атрибуты width и одноименные свойства ксс

Спасибо за советы Не много по манипулировав с width, добился только того что header уходит вправо и не совсем одинаковое расстояние получается слева и справа, ну основная область остаётся на месте.

Если Вас не затруднит ответьте пожалуйста, где именно нужно внести изменения. Спасибо

CSS

/* General Style */

body {background:#F0F0F0; margin:0px; padding:0px;text-align:center;}

#wrap {background:url('/.s/t/848/3.gif') repeat-y;width:750px;margin-left:auto;margin-right:auto;min-width:750px;width: expression(document.body.clientWidth > 750 ? "750" : "750px");text-align:left;}

#header {width:698px;height:98px;border:1px solid #555555;background:url('/.s/t/848/2.gif') repeat-x #889081;//width:700px !important;}

#dataBar {padding:5px;text-align:right;font-size:7pt;color:#C9D5BF;}

#rssBlock {margin:5px;text-align:center;}

h1#logo {float:right;color:#F2FFE5;font-size:20pt;font-weight:normal;padding:0px;margin:20px;display:inline;}

#sidebar {float:left;width:180px;}

#content {float:right;width:560px;display:inline;}

#textBlock {width:478px;overflow:auto;background:#FFFFFF;border:1px solid #CCCCCC;padding:10px;}

.menuTable {padding:5px;}

.catBox {padding:5px;width:440px;border-top:1px solid #CCCCCC;margin-left:50px;margin-top:5px;}

.catContent {padding: 0px 20px;}

.catBox h2, .chatBox h2 {color:#4E8F15;font-size:11pt;padding:5px;margin:0;}

.chatBox {width:480px;margin:10px;}

.boxTable {width:180px;padding:0;margin:5px 0px;text-align:center;}

.boxTable h2 {font-size:9pt;color:#E7EBEA;padding:5px;margin:0px;text-align:center;background:url('/.s/t/848/2.gif') repeat-x #889081;}

.boxContent {margin-left:auto;margin-right:auto;overflow:auto;padding:5px 2px;}

.left {text-align:left;}

#footer {width:698px;padding:10px 0px;text-align:center;border:1px solid #555555;color:#C9D5BF;background:url('/.s/t/848/2.gif') repeat-x #889081;//width:700px !important;}

Вот страницы сайта

<title>$SITE_NAME$ - $MODULE_NAME$</title>

<?$META_DESCRIPTION$?>

</head><body>

$ADMIN_BAR$

$GLOBAL_AHEADER$

<?if($SMENU_1$)?>

<div class="menuTable">$SMENU_1$<br><br><table style="border-collapse: collapse;" align="center" height="93" width="170"><tbody><tr><td><style type="text/css"></style><div id="ff-7959-box" class="ff_7959_box"><p class="ff_7959_head"><a href="http://www.finforce.ru"><br></a></p></div><script type="text/javascript" src="http://www.finforce.ru/export.new/position.php?rand=7959&height=250&curpair=YTo5OntpOjA7czo2OiJVU0RDSEYiO2k6MTtzOjY6IkVVUlVTRCI7aToyO3M6NjoiVVNE

SlBZIjtpOjM7czo2OiJHQlBVU0QiO2k6NDtzOjY6IkdCUEpQWSI7aTo1O3M6NjoiRVVSSlBZIjtpOjY7c

zo2OiJFVVJHQlAiO2k6NztzOjY6IkFVRFVTRCI7aTo4O3M6NjoiVVNEQ0FEIjt9&color=YTo4OntzOjg6ImJveF9iYWNrIjtzOjc6IiNFN0VCRUEiO3M6ODoiYm94X2JvcmQiO3M6Nz

oiI0U3RUJFQSI7czo5OiJheGlzX3RpY2siO3M6NzoiIzAwMDAwMCI7czoxMjoiaW5kX2JhY2tfYnV5Ijt

zOjc6IiM2QTVBQ0QiO3M6MTI6ImluZF9ib3JkX2J1eSI7czo3OiIjMDAwMDgwIjtzOjEzOiJpbmRfYmFj

a19zZWxsIjtzOjc6IiNGRjAwMDAiO3M6MTM6ImluZF9ib3JkX3NlbGwiO3M6NzoiIzhCMDAwMCI7czo0O

iJ0ZXh0IjtzOjc6IiMwMDAwMDAiO30="></script><br></td></tr></tbody></table><br></div>

<?endif?>

<div id="rssBlock">$GLOBAL_CLEFTER$

</div></div>

<?if($MODULE_NAME$)?><h1>$MODULE_NAME$</h1><?endif?>

$CONTENT$

</div>

$GLOBAL_BFOOTER$

</div>

</body></html>

stars · April 15, 2010

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

1) #wrap

2) #sidebar

3) <table style="border-collapse: collapse;" align="center" height="93" width="170">

4) <!--.ff_7959_box {width: 150px

5) #ff-7959-box .ff_7959_box

6) #content

7) #textBlock

Ну это на первый взгляд и исходя только из того что вы показали...

Edited April 15, 2010 by stars

Sign In

как растянуть сайт на весь браузер если на странице мало контента

Question

Link to comment

Share on other sites

21 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

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