С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.54/50: Рейтинг темы: голосов - 50, средняя оценка - 4.54
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
1

Как настроить высоту страницы

27.07.2012, 16:19. Показов 9167. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Фон контента отображается по разному на разных страницах. Как сделать чтобы высота всегда одинаковая была?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
html {width:100%;height:100%; color:#E8E3D1; font-family:"Verdana", Times, serif; font-size:11pt; font-weight:500}
body { position:relative; height:100%; min-height:100%; height:1400 !important; background-image:url([url]http://by-servers.ru/DLENG/templates/Gemini/img/wrapper-bg.jpg);[/url]
background-color:#000;
background-repeat-x: no-repeat;
background-repeat-y: repeat;
background-attachment:fixed;
background-position-x: 50%;
background-position-y: 0%;
background-origin: initial;
background-clip: initial;
}
 
p{padding-left:10px; padding-right:10px; text-indent:20px; text-align:justify}
#container {position:absolute; width:100%; height:100%; margin:auto; text-align:center}
#main {position:relative; width:950px; min-height:100%; margin:auto; text-align:left; background-color:#333; padding-bottom:0px}
#header {position:relative; width:100%; height:550px; background-color:#333}
#nav {position:absolute; width:100$; height:50px; line-height:50px;}
#nav_item {position:relative; padding:15px; height:50px; color:#C5BC98}
#nav_item:hover {color:#F80}
.choosen {background:#666}
 
#social {position:absolute; height:50px; right:0px; padding-top:10px; padding-right:10px;}
#logo {position:absolute; bottom:0px;}
 
#sidebar {position:relative; width:313px; height:100%; float:right}
#content {position:relative; width:610px; height:100%; padding:9px;}
#footer {height:45px; background:#000; bottom:0px; text-align:center}
Скрин - https://www.cyberforum.ru/atta... 1343391500
Миниатюры
Как настроить высоту страницы  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.07.2012, 16:19
Ответы с готовыми решениями:

Отзывчивый дизайн: настроить навигацию, сделать автоматическую высоту страницы
Господа, разбираюсь с отзывчивым дизайном (responsive design), создал страничку, но есть несколько...

Как подогнать высоту страницы под высоту экрана?
Здравствуйте, друзья! Подскажите, пожалуйста, как сделать так, чтобы высота страницы (например вот...

Как уменьшить высоту страницы?
Сверстал страницу, но появились полосы прокрутки по вертикали и горизонтали. По горизонтали убрал,...

Как сделать сайдбар на всю высоту страницы?
http://arhicentr.com/projects/public_buildings_and_complexes/cafe_50_seats_on_a_street_karasun_quay_...

12
7 / 7 / 0
Регистрация: 27.07.2012
Сообщений: 40
27.07.2012, 16:46 2
Найдите в интернете информацию - "Как прибить Footer к низу". Информации много, пробуйте!)
0
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
27.07.2012, 17:30  [ТС] 3
Цитата Сообщение от AkaVirt Посмотреть сообщение
Найдите в интернете информацию - "Как прибить Footer к низу". Информации много, пробуйте!)
есть готовый пример?
0
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 442
27.07.2012, 17:34 4
Та там не в футере дело, походу. В таких шаблонах часто футер не цепляют жестко к низу. Судя по картинке, я бы прописал в CSS overflow:hidden блоку #main
0
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
27.07.2012, 17:37  [ТС] 5
Цитата Сообщение от rean1mator Посмотреть сообщение
Та там не в футере дело, походу. В таких шаблонах часто футер не цепляют жестко к низу. Судя по картинке, я бы прописал в CSS overflow:hidden блоку #main
не помогло, когда так прописать получается следующее: отображается фон контенте/потом футер/потом опять контент
0
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 442
27.07.2012, 18:15 6
а можно ещё HTML поглядеть?

А вообще сайт в инете есть? проще было бы проблему найти
0
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
27.07.2012, 18:18  [ТС] 7
Цитата Сообщение от rean1mator Посмотреть сообщение
а можно ещё HTML поглядеть?

А вообще сайт в инете есть? проще было бы проблему найти
отправил л.с.
0
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 442
27.07.2012, 18:28 8
блоку #main напишите дополнительно height:100%

И ещё вопрос: А требуется прижатие футера к низу?
У Вас ещё и блок Container не тянется как надо. Грубо говоря, не обращает внимания на вложенные блоки. Вот тут обычно overflow:hidden и спасает. И для чего этому блоку абсолютное позиционирование?

При position:absolute другие блоки ведут себя так, будто блока с position:absolute не существует
1
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
27.07.2012, 18:38  [ТС] 9
Цитата Сообщение от rean1mator Посмотреть сообщение
блоку #main напишите дополнительно height:100%

И ещё вопрос: А требуется прижатие футера к низу?
У Вас ещё и блок Container не тянется как надо. Грубо говоря, не обращает внимания на вложенные блоки. Вот тут обычно overflow:hidden и спасает. И для чего этому блоку абсолютное позиционирование?

При position:absolute другие блоки ведут себя так, будто блока с position:absolute не существует
не помогло, пропал фон, а ошибка осталась
0
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 442
27.07.2012, 19:22 10
попробуйте перед футером поставить
HTML5
1
<div id="clear"></div>
и стиль ему
CSS
1
2
3
4
5
#clear {
        height:0px;
    font-size:1px;
    line-height:0px;
    clear:both;}
Добавлено через 5 минут
А ели футер прижимать к низу, то до футера пишем
HTML5
1
2
3
<div id="clear"></div>
<div id="rasporka">
</div>
а в стиль
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#clear {
    height:0;
    font-size:1px;
    line-height:0px;
    clear:both;}
 
#rasporka {
    height:89px;}
 
#footer {
    position:relative;
    bottom:0px;
    margin-top:-89px;
    min-width:950px;
    height:89px;
При этом сам футер выносим из всех дивов и, в том числе, из Container

только размеры Ваши ставьте
1
7 / 7 / 2
Регистрация: 24.12.2011
Сообщений: 223
28.07.2012, 14:06  [ТС] 11
Цитата Сообщение от rean1mator Посмотреть сообщение
попробуйте перед футером поставить ...
спасибо большое! помогло!
0
9 / 9 / 3
Регистрация: 14.12.2010
Сообщений: 129
28.07.2012, 23:58 12
Кстати ссылка по теме: Как прижать футер (подвал) к низу
0
1 / 1 / 0
Регистрация: 15.10.2020
Сообщений: 19
16.04.2022, 17:32 13
Эм.... не думали прописать в css-стилях футера:

Код
position: fixed;
bottom: 0;
????

А чтобы размер нигде не менялся:

Код
height: 2vw;
используйте именно vw. этот стандарт всегда одиноков для всех компьютеров
0
16.04.2022, 17:32
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.04.2022, 17:32
Помогаю со студенческими работами здесь

Как растянуть body на всю высоту страницы
Добрый день. Вопрос заключается в следующем: Высота body покрывает только окно браузера, а при...

Как сделать блоки во всю высоту страницы
Долго не практиковался, решил изучить JS, собственно, есть врап и два блока как сделать, чтобы, эти...

Как уменьшить высоту фона главной страницы на блоге?
К сожалению, я плохо разбираюсь в HTML и CSS... Поэтому хочу у Вас спросить, как мне уменьшить...

Растягиваем высоту страницы
Высота страницы Добрый вечер. Пытаюсь собрать небольшую страничку сам. Что-то уже получилось,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru