Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #5

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

    алексс
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


Вопрос для знающих html и css

#1 shaddad

shaddad
  • Неактивные
  • 42 сообщений
  • Репутация: 0
0

Отправлено 02 January 2013 - 19:59

Приветствую.
Есть html страничка, разделённая на 2 колонки - контент и - сайдбар.
Сделано примитивно - через float:left и float:right - и задан диапазон ширины в процентах.
Так вот - проблема: сайдбар поставлен на height:100% - и тянется только до окна браузера, а если контента много и появился ползунок браузера (если по нему спустится вниз), то сайдбар прерывается. Вопрос: как сделать так, чтобы сайдбар соответствовал длине контента?

 

 

  • 0

#2 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 January 2013 - 20:14

overflow:hidden
  • 0

#3 shaddad

shaddad
    Topic Starter
  • Неактивные
  • 42 сообщений
  • Репутация: 0

Отправлено 02 January 2013 - 21:40

Нет, не помогает...


  • 0

#4 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 22:02

html, body {
  height: 100%;
}

Если есть обвертка - к ней тоже надо добавить или указать явно высоту. Если оно не знает высоту - то и не знает сколько это будет 100%. Вы ведь тоже в цифрах не скажете сколько 100% от бесконечности.
  • 0

#5 shaddad

shaddad
    Topic Starter
  • Неактивные
  • 42 сообщений
  • Репутация: 0

Отправлено 02 January 2013 - 22:06

Немного непонятно - вот мой стиль:

#all {width:100%;min-height:100%; height:100%; margin:0 auto; background:#808080}
#left {float:left; width:70%; padding-left:25px}
#right {float:right; width:20%;background:#d5d5d5; height:100%; padding-left:10px; border-left: 3px solid #000;}

  • 0

#6 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 22:24

А html? А body где?
  • 0

#7 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 January 2013 - 22:35

забыл еще один вариант тебе подсказать
копай вот в эту сторону

<div style="display:table-cell;">
<div style="display:table-row">
<div style="display:table-cell;background:red">column 1</div>
<div style="display:table-cell;background:blue">column 2</div>
</div>
</div><div style="display:table-cell;">
<div style="display:table-row">
<div style="display:table-cell;background:red">Left</div>
<div style="display:table-cell;background:blue">Right</div>
</div>
</div>
это точно будет работать

стили подправишь сам как надо, ширину, цвета, фон. суть метода в том, что правая колонка всегда будет по высоте левой и наоборот кстати.
а еще рекомендую использовать фиксированную ширину для главного блока страницы. резиновая верстка уже как то не в моде
  • 1

#8 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 22:37

Да, можно и таблицами сверстать.. но почему бы просто не прописать высоту? Сравните сами прописывание каждому диву стиль таблиц или в CSS один параметр дописать нескольким дивам:

html, body, all, left, right {
  height: 100%;
}

Если я правильно понял структуру макета, нам же код html не показали :blink:
  • 0

#9 shaddad

shaddad
    Topic Starter
  • Неактивные
  • 42 сообщений
  • Репутация: 0

Отправлено 02 January 2013 - 22:39

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


  • 0

#10 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 January 2013 - 22:40

Да, можно и таблицами сверстать..

это не табличная верстка

но почему бы просто не прописать высоту?

а если контента будет больше, чем может вместить заданная высота?
  • 0

#11 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 22:48

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


Смотря где прописывать, там где контент может розтягивать в высоту - ставим 100%, где не должен - ставим в пикселях. Насчёт табличной верстки - я имел ввиду, что можно и таблицей сделать, а не про ваш конкретный пример.

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


Для этого есть адаптивный дизайн. Но он не всем сайтам подходит.
  • 0

#12 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 January 2013 - 22:52

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

из личной статистики

первая цифра - ширина, вторая - процент визитов

1280 - 24.7%
1366 - 17.1%
1024 - 17.1%
1920 - 12.3%
1440 - 4.5%
1600 - 4.1%

ну дальше писать не буду, процент остальных совсем маленький
статистика за 60 тысяч посещений

там где контент может розтягивать в высоту - ставим 100%, где не должен - ставим в пикселях.

подумай теперь, что ты написал
вот тебе пример
<div style="height:20px;border: black solid 1px;overflow:auto;">
<div style="height:100%;">
a<br>
a<br>
a<br>
</div>
</div>

  • 0

#13 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 23:20

Но что учит этот пример? Если первый блок содержит второй блок и имеет 20 пикселей в высоту при этом выходящее за рамки содержимое будет скрыто, то какой был бы смысл помещать еще один блок внутрь первого блока зная, что у него высота не позволит содержимому внутри быть полностью увиденным? Вы немного не правильно задали пример. Если б и был бы такой код на моём сайте, то высота, которая строго задана в пикселях была бы равна тому, что находится в блоке со 100% высотой.

Например:

<div>
<div style="height: 106px; overflow: hidden;">
<div styl="height:100%;">
<img src="banner.png" style="padding-top:2px; padding-bottom: 1px;" height="100" width="100"/>
<img src="banner.png" style="padding-top:1px; padding-bottom: 2px;" height="100" width="100"/>
</div>
</div>
</div>

И блок 100% и содержимое все видно и родительский блок указан в пикселях.
  • 0

#14 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 January 2013 - 23:24

высоту то от 100% где брать второму блоку?

здесь <div style="height:20px;border: black solid 1px;overflow:auto;">
  • 0

#15 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 January 2013 - 23:42

Немного не так написал, согласен. Такой пример можно создать, но... это же и решение. Ведь если у вас стоит высота 20 пикселей и вы скрываете остальное содержимое - так и должно быть. Автору топика же надо было растянуть содержимое блока, вот только у него не была задана правильно высота. Если у вас есть претензия, что мой способ неправильный - опишите в чём.


  • 0

#16 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 03 January 2013 - 00:43

Если у вас есть претензия, что мой способ неправильный - опишите в чём.


1. Ты сначала прочитай первый пост: автору нужно было добиться, чтобы обе колонки имели одинаковую высоту. Причем высота эта не 100% ВИДИМОГО окна браузера как ты предлагаешь делать, а 100% левой колонки, которая может выходить за пределы видимой области по высоте, то есть появится вертикальный скролл.

2. Если ты уж даешь советы и примеры как сделать - то потрудись перед этим проверить свой код

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

P.S. Извини за грубость
  • 1

#17 shaddad

shaddad
    Topic Starter
  • Неактивные
  • 42 сообщений
  • Репутация: 0

Отправлено 03 January 2013 - 00:56

Супер! Всё работает! Спасибо огромное!


  • 0

#18 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 03 January 2013 - 01:52

Я не флужу, а веду дискуссию. Давайте без грубостей и ТЫканий, я к вам так не обращался. Скорее всего я мог ошибиться потому что сфера работы другая, сам верстаю не идеально, но форум это форум, а не просто сайт вопрос-ответ. Код пересмотрел, одинаковой высоты с контентом так как я предложил действительно не выйдет сделать. Один из вариантов - убрать высоту 100% и сделать фон с разделением картинкой сайдбара. В итоге блок #all будет растянут по длине того блока, где больше текстакартинок и иметь равную высоту, не 100% от окна браузера.


  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru