Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696

Хватит ли 100% максимальной высоты

16.08.2015, 18:36. Показов 1355. Ответов 20
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть общий блок #main. У него высота 1000 пикселей или 100% (формально).
В нем есть #header, #content, #footer.
Допустим #header высотой 100 пикселей и #footer столько же.
Получается #content 800 пикселей, а значит 80% от высоты #main.
Но #content увеличивается динамически добавляющимися блоками и он вскоре будет занимать не 80%, а например 90% и все больше и больше...
По идеи можно оставить это так и не заморачиваться, но есть одно но.
В общем чтобы сайт отображался на мобильных браузерах нормально, а именно, чтобы например андроид не увеличивал текст, а был текст пропорционально сайту. Для этого я использовал:
CSS
1
2
3
4
5
6
*{
    max-height:777777px;
    /*
       some another code
    */
}
И поэтому я вынужден поставить для контента какую либо огромную максимальную высоту так чтобы при растягивании его (контента), контент ее ни как не достиг.
Иначе где нибудь закончится контент, а эти динамич. блоки, о которых я говорил выше выпадут из "родителя".
В общем мне нужно указать такую максимальную высоту, чтобы контент ее не достиг не при каких обстоятельствах.
Можно ли добиться такого указав максимальную высоту в 100% или не хватит?

Или применить значение none?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.08.2015, 18:36
Ответы с готовыми решениями:

Ограничение максимальной ширины и высоты картинки в CSS
Товарищи, помогите, пожалуйста! Тут такое дело. Взял в аренду интернет-магазин. Редактирую шаблон. Для редактирования доступны...

Див в 100% высоты
привет вот тут пример в пару строк, не могу сделать чтобы левый див был 100% высоты. Помогите :( http://jsfiddle.net/3Uk6S/ ...

Потомок не растягивается на 100% высоты родителя в Chrome
Не могу понять почему потомки не растягиваются на 100% высоты родителей. В новых браузерах проблема не наблюдается. Всё слетает в Google...

20
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.08.2015, 18:53
Mikhail Shell, как вариант:
CSS
1
2
html, body{min-height:100%}
#content{height:auto}
Но здесь свои нюансы к которым относится позиционирование элементов внутри #content...
1
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
16.08.2015, 19:22  [ТС]
Спасибо, но не помогло.
Скажите пожалуйста, будет ли наследоваться свойство max height со значением none!
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.08.2015, 20:03
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Скажите пожалуйста, будет ли наследоваться свойство max height со значением none!
Не будет... А почему не помогло? Можно, как вариант попробовать задействовать медиа-запросы...
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
16.08.2015, 20:39  [ТС]
Fedor92, ложная тревога - работает. Спасибо за помощь!
Только хочу спросить, есть ли побочные действия этого решения.
Просто предыдущее решение имело таковые.
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.08.2015, 20:41
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Fedor92, ложная тревога - работает. Только хочу спросить, есть ли побочные действия этого решения.
Вообще не наблюдалось, но если Вы используете например абсолютное позиционирование, то учитывайте, то что блок #content должен иметь свойство postition:relative... При добавлении новых блоков в контент его высота будет меняться в зависимости от содержимого, а минимальная высота указанная для html и body позволит растянуть страницу...
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
16.08.2015, 21:10  [ТС]
К сожалению работало старое решение, а то решение что вы мне предложили не работает. Создалось впечатление о "работающем решении", потому что старое решение в коде имелось. Как только убрал, проблема появилась изначальная с размером шрифта.
Подскажите пожалуйста, как можно еще сделать так, чтобы шрифты по размеру везде были пропорционально всему сайту как на ПК так и на мобильных, без увеличения текста в размере.
Или может что то быть не так в коде что не дает работать решению?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.08.2015, 21:20
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Подскажите пожалуйста, как можно еще сделать так, чтобы шрифты по размеру везде были пропорционально всему сайту как на ПК так и на мобильных, без увеличения текста в размере
1. Задавать размер шрифта в относительных величинах...
2. Использовать медиа-запросы...
3. Использовать готовые скрипты, масштабирующие текст в зависимости от размера окна устройства...
Это наиболее очевидные варианты...
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Или может что то быть не так в коде что не дает работать решению?
Честно говоря я не совсем улавливаю связь между размером шрифта и высотой блока #content для того, чтобы утвердительно сказать, что же происходит нужен код... Сдаётся мне Вы копаете не в том направлении... Как мне кажется Вам необходимо правильно менять свойства шрифта, а не блока в котором он находится...
1
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
16.08.2015, 21:37  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
1. Задавать размер шрифта в относительных величинах...
2. Использовать медиа-запросы...
3. Использовать готовые скрипты, масштабирующие текст в зависимости от размера окна устройства...
Это наиболее очевидные варианты...
Спасибо за информацию!
Цитата Сообщение от Fedor92 Посмотреть сообщение
Честно говоря я не совсем улавливаю связь между размером шрифта и высотой блока #content для того
Я бы не создал тему если бы не было следующей проблемы.
Есть изначальный код, который я нашел. Он помимо масштаба текста, также является и максимальной высотой всех элементов на странице. В том числе и контента.
А контент на этой странице динамически увеличивающийся сообщениями. А максимальная ширина означает то, что
контент где то покажет свою границу, а сообщения выпадут из него.
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.08.2015, 22:08
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Я бы не создал тему если бы не было следующей проблемы.
Ну если всё-таки содержимое блока #content всё-таки зависит от кол-ва сообщений, а не от текста в них - тогда мой вариант должен работать... По всей видимости надо подпилить код или комплексно вместе со шрифтом применить стили... В любом случае хотелось бы увидеть код... В идеале на хостинге(хотя бы бесплатном, если нет других вариантов)...
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
17.08.2015, 10:43  [ТС]
А весь код, или только #main и #content?
В общем вот css до внедрения старого решения и вашего.
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
*{
    margin:0pt;
    padding:0pt;
    outline:none;
    border:none;
    text-decoration:none;
    font-family:'Roboto Condensed Regular', 'Arial Narrow', sans-serif;
}
html, body, #main{
    background-color:#ffffff;
}
#main{
    margin:30pt auto;
    width:700pt;    
}
#main:after {
    content:".";
    clear:both;
    display:block;
    height:0pt;
    font-size:0pt;
    visibility:hidden;
}
#main{
    display:inline-block;
}
/* Хак для IE 6 и 7 спрятанный от IE-mac \*/
* html #main {
    height:1%;
}
#main {
    display:block;
}
/* Конец хака */
 
#header, #menu, #content, #footer{
    float:left;
    border-radius:18pt;
    display:block;
}
/*
   code of another blocks
*/
#content{
    width:466pt;
    min-height:210pt;
    max-height:none;
    margin-left:18pt;
    margin-top:18pt;
    padding:18pt;
    background-color:#ffffff;
    box-shadow:0.2pt 0.1pt 5pt #000;
}
/*and code of dinamic blocks*/
#content .comments{
    width:460pt;
    margin:17pt 0pt;
    word-wrap:break-word;
    font-size:18pt;
}
#content .comments .datetime{
    width:440pt;
    padding:10pt;
    background-color:#FFA500;
    color:#ffffff;
    border-radius:18pt;
}
#content .comments .text{
    width:440pt;
    padding:10pt;
    padding-top:15pt;
    color:#2A52BE;
    background-color:#ffffff;
}
Цитата Сообщение от Fedor92 Посмотреть сообщение
А почему не помогло?
Или вы имели в виду что и мое и ваше решение (кусочки кода) надо использовать?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
17.08.2015, 10:55
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Или вы имели в виду что и мое и ваше решение (кусочки кода) надо использовать?
Именно это и имелось в виду...
CSS
1
2
3
* html #main {
    height:1%;
}
Интересный хак, а почему Вы думаете, что он работает только на ie? И хотелось бы увидеть html, если это возможно, чтобы его на андроиде посмотреть...
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
17.08.2015, 11:54  [ТС]
Fedor92, получается у контента теперь нет ограничений по высоте если прописан height auto (у контента)?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
17.08.2015, 12:16
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Fedor92, получается у контента теперь нет ограничений по высоте если прописан height auto (у контента)?
Вы правильно понимаете... Высота блока контент изменяется в зависимости от его содержимого.... То есть высота блока меняется с каждым новым сообщением и не ограничивается...
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
17.08.2015, 12:22  [ТС]
Fedor92, спасибо. А получается у всех элементов с height auto не будет ограничений по высоте?
И еще 2 вопроса
1. будут ли ограничения по высоте у элементов в контенте?
2. будет ли работать height auto при min-height?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
17.08.2015, 12:37
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
будут ли ограничения по высоте у элементов в контенте?
Если Вы сами в свойствах не зададите это ограничение...
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
будет ли работать height auto при min-height?
Будет... min-height - указываете раньше, чем height:auto...
1
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
17.08.2015, 22:02  [ТС]
Спасибо за помощь!

Добавлено через 39 минут
И еще один вопрос.
Будет ли max height none также упразднять (убирать) максимальную высоту у контента как и height auto?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
17.08.2015, 22:28
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Будет ли max height none также упразднять (убирать) максимальную высоту у контента как и height auto?
Я не вижу рационального смысла использования данного свойства в Вашем коде... Если бы, например, у Вас присутствовало в коде свойство max-height, но в Вашем коде его вроде нет, тогда было бы логично его использовать, чтобы отменить величину максимальной высоты блока... Для упразднения годится, только в том случае, если по каким либо причинам в коде присутствует максимальная высота!
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
18.08.2015, 07:32  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
Для упразднения годится, только в том случае, если по каким либо причинам в коде присутствует максимальная высота!
Но перед этим было:
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Или вы имели в виду что и мое и ваше решение (кусочки кода) надо использовать?
Цитата Сообщение от Fedor92 Посмотреть сообщение
Именно это и имелось в виду...
То бишь и
CSS
1
2
html, body{min-height:100%}
#content{height:auto}
и
CSS
1
2
3
*{
max-height:777777pt;
}
А max height используется для всех элементов.
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
19.08.2015, 17:22  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
2. Использовать медиа-запросы...
Спасибо. А можно чуть чуть по подробнее?
Знаю что они есть, но не знаю как их использовать.
Я имею в виду какие медиа использовать.
media screen (min-width) или что?
Синтаксис не знаю.
Видел что после @media screen идут скобки и в них min-width'ы какие то, но не знаю точно. Раньше не задавался этим вопросом, что в этих скобках писать?
Подскажите пожалуйста!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
19.08.2015, 17:22
Помогаю со студенческими работами здесь

Как задать 100% высоты для таблицы?
Никак не получается задать 100% высоту таблицы. Значение "height: 100%" не помогает. Если задавать высоту DIV в еденицах, то таблица сама...

Сделать 100% высоту в блоке без высоты
Честно говоря, не знаю способа, как сделать 100% высоту блока, который находится внутри блока у которого нет высоты, но есть padding....

Bootstrap 3 Как сделать ссылку на 100% высоты блока
Здравствуйте. В продолжении темы: https://www.cyberforum.ru/html/thread1624701.html#post8541374 <div...

Проблема с расчетом высоты элемента через calc(100% - №px) при <!DOCTYPE html>
Ниже простой код...Я ожидаю что будут рассчитаны высота и ширина блока main относительно высоты и ширины экрана и у блока будет активна...

Посоветуйте алгоритм нахождения максимальной высоты
Есть STL-файл (информация о фигуре в нём хранится в виде координат вершин треугольников). Пример: Хочу разработать конвертор...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru