Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Aximero
1 / 1 / 0
Регистрация: 04.08.2016
Сообщений: 9
1

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

05.10.2017, 20:27. Просмотров 384. Ответов 5
Метки нет (Все метки)

У меня есть 3 блока. Один родительский, а другие два в нем.
Нужно сделать так, чтобы высота блока-родителя зависела от первого блока потомка (высота которого по содержанию), но при этом высота второго блока-потомка зависела от высоты блока родителя (а содержание скролилось)
свойство inheit не работает, так как оно может быть унаследовано, если у родителя четко установлена высота, а у родителя она тоже определяться динамически от наполнения….
XML
1
2
3
4
5
6
7
8
<div class="platform">
      <div class="long lf">
         Тут содержимое с фиксированным размером, который тем не менее меняться при изменении width страницы…
      </div>      
      <div class="long rv">
         Тут содержимое которое превышает допустимый размер блока родителя, поэтому должно быть ограничено и скролиться… 
      </div>   
</div>
Мои попытки
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 div.platform {
    width: 80%;
    max-width: 1100px;
    margin: auto;
 }
 div.platform>div{
    display: inline-block;
    margin: 0px 1%;
    width: 47%;
 }  
 div.long{
    height: 380px;   
    margin: 15px 0px;   
 }
 
 div.lf{
   overflow: hidden;
 }
 div.rv{
   overflow: auto;
   box-sizing: inherit;
 }
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.10.2017, 20:27
Ответы с готовыми решениями:

Как сделать, чтобы немодальная форма всегда была поверх других (даже если она не активна)?
Субж... Недавно перешел с Дельфей на VB (вынужден был по работе)... Этот вопрос - мое первое...

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

Сделать так, что бы форма реагировала на нажатие клавиш даже если она не активна
Как заставить форму реагировать на нажатие клавиш, при том что она не активна (свернута). Ну...

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

Как сделать так, чтобы только один виджет всегда обрабатывал события keyPressEvent?
У меня есть виджет который обрабатывает события нажатия клавиш. Рядом с ним расположен другой...

5
AlexZaw
1006 / 874 / 384
Регистрация: 07.08.2016
Сообщений: 2,587
Завершенные тесты: 2
05.10.2017, 20:46 2
средствами css никак, используйте JS

Добавлено через 10 минут
должно помочь, только не забываем подключить jquery
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   $(document).resize(resizeBlock('.long'));
    function resizeBlock() {
 
 
        var heights = [];
 
        $('.long').each(function () {
            heights.push($(this).height());
            var max = Math.max.apply(null, heights);
            $('.long').each(function () {
                $(this).height(max);
 
 
            })
 
        });
    }
1
Aximero
1 / 1 / 0
Регистрация: 04.08.2016
Сообщений: 9
05.10.2017, 21:02  [ТС] 3
А хотя бы на чистом JS?
0
AlexZaw
1006 / 874 / 384
Регистрация: 07.08.2016
Сообщений: 2,587
Завершенные тесты: 2
05.10.2017, 21:19 4
На чистом JS не вспомню, я и этот то код откопал у себя в закромах, писал его когда начинал учить JS, с тех пор времени не было продолжить, да и то он не совсем верен, он сравнивает все элементы с классом .long, выбирает максимальное значение и выравнивает все остальные с таким же классом по максимальному. Можно конечно в первой строке заменить .long на .lf, чтобы не возникло путаницы, но все-таки он не конкретно под данную задачу. Дал его просто как временный костыль.
Подключить jQuery можно вставив в head вот такую строку:
HTML5
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
0
aj17
330 / 307 / 167
Регистрация: 02.06.2014
Сообщений: 1,125
05.10.2017, 22:30 5
Если я правильно понял, кажется тут и без js можно
PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            bottom: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font: 16px/24px Arial;
        }
        
        .box {
            display: table;
            width: 100%;
            table-layout: fixed;
            padding: 20px;
            background-color: #fafafa;
        }
        
        .item {
            display: table-cell;
            vertical-align: top;
            width: 50%;
            position: relative;
            padding: 0 20px;
        }
        
        .scroll{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
        
        .item p{
            margin-bottom: 20px;
        }
 
    </style>
</head>
 
<body>
    <div class="box">
        <div class="item">
            <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Возвращайся своих пустился своих моей всеми приставка своего, заголовок использовало скатился даль, сбить одна великий? Бросил, рекламных, предложения! Грустный, за.</p>
            <p>Безорфографичный раз она решила, родного повстречался составитель. Лучше подпоясал встретил вдали послушавшись за великий текст одна, щеке текстов залетают злых знаках несколько меня рыбными образ языком букв. Раз, власти, семантика.</p>
            <p>Лучше коварных все снова ему, раз буквенных букв, до несколько, маленький залетают заманивший домах на берегу? Которое своего своих своих продолжил большой языкового великий переписывается о одна точках, деревни живет это?</p>
        </div>
        <div class="item">
            <div class="scroll">
                <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Ведущими но залетают, вершину продолжил моей языком курсивных сих имеет города буквоград его маленький. Мир толку гор вскоре переписали рыбного.</p>
                <p>Все, родного она рыбного дорогу предупреждал lorem своего ему коварный семантика взгляд текста великий решила переписывается, ipsum щеке ручеек, города пустился знаках, переписали правилами запятой подпоясал раз журчит. Коварных, дал.</p>
                <p>Переулка до страну если щеке, буквоград. Реторический рот инициал власти встретил путь речью семантика свой грамматики агенство даже языкового наш безорфографичный прямо сих текст, родного океана, деревни. Меня, живет, жизни.</p>
                <p>Возвращайся путь языкового маленькая от всех домах сих свое, ipsum рыбного реторический рыбными назад lorem имеет вершину запятой, то, ее оксмокс рот диких послушавшись. Своих ipsum мир снова, обеспечивает одна продолжил.</p>
                <p>Ручеек коварный образ подзаголовок маленькая что парадигматическая, залетают взобравшись встретил снова. Страну переулка предупреждал города, возвращайся взгляд лучше парадигматическая обеспечивает одна там страна имеет имени своего! Над, lorem буквоград это?</p>
                <p>Единственное безорфографичный не если моей подпоясал приставка, себя языкового знаках букв скатился решила раз буквоград! Дорогу назад текстов ему до реторический текст подзаголовок все родного, последний свое страна, необходимыми моей!</p>
            </div>
        </div>
    </div>
</body>
 
</html>
0
andrey7287
30 / 28 / 14
Регистрация: 06.01.2016
Сообщений: 150
05.10.2017, 22:33 6
Javascript
1
document.querySelector('.rv').style.height = document.querySelector('.lf').clientHeight+'px';
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.platform {
  margin: 0 -15px;
}
.long {
  float: left;
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.rv {
  overflow-y: scroll;
}
https://jsfiddle.net/zz2u7gxy/
2
05.10.2017, 22:33
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.10.2017, 22:33

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать так, чтобы программа не показывалась при выборе окон через alt + tab, если она сидит в трее
Как сделать так, чтобы программа не показывалась при выборе окон через alt + tab, если она сидит в...

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

Сделать так, чтобы можно было нажать на кнопку только в случае, если выбран один из Checkbox'ов
Нужна помощь. Есть на форме 2 checkbox и кнопка, нужно чтобы мы могли нажать на кнопку в случае...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.