Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: overflow-x: visible

Добрый день, имеется фиксированный блок, в котором лежит многоуровневое меню. Подменю выпадают справа. Задача: нужно скроллить пункты в колонке. Элементы прячутся по свойству overflow-y: hidden, а чтобы отображались дополнительные колонки установил overflow-x: visible, но вместо этого снизу появляется скролл и выпадающие списки отображаются внутри блока. Будьте добры, подскажите как можно обойти эту проблему?
Ответ: Сами мы не местные, коды все украли на вокзале, подайте на словесный портрет.
Вопрос: Как узнать полную высоту скрытого содержимого блока со стилем overflow-x: 'hidden'

Здравствуйте друзья. Пошарив поисковики и так ничего не найдя, сразу к вам. Натолкнулся на такую проблему. Имеем:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#contents-wrap{
    position: relative;
    width: 100%;
    height: 100%;
}
#contents{
    position: relative;
    width: 70%;
    height: 50%;
    margin: 0 auto;
    overflow-x: 'hidden';
}
Соответственно код HTML с большим текстом, который по высоте больше 50% и при смене разрешения экрана, текст который находится в нем, раздвигает блок с id contents на неизвестную величину, та часть которая не влезает в первоначально заданный размер, скрывается и скроллится вниз пользователем, а высота этого содержимого не известна:

HTML5
1
2
3
<div id="contents-wrap"><div id="contents">
Большой текст!
</div></div>
Понятно дело узнать высоту блока с id contents можно многими способами например так:
Javascript
1
$('#contents').height();
но он будет возвращать одно и тоже значение в 50% высоты блока с id contents-wrap, а полная высота этого блока с его содержимым будет неизвестна.
У меня задача состоит в том что бы при прокрутке, когда пользователь проскроллит вниз повесить событие, а для этого мне нужно знать полную высоту блока с id contents, который заполнен текстом, и так как сайт у меня резиновый, высота блока с id contents будет все время меняться и поэтому условие невозможно поставить без этой величины.

Javascript
1
2
3
4
5
6
7
8
$('#contents').scroll(function(){
    if ($(this).scrollTop() == 'полная высота блока с id contents'){//условие сработает когда пользователь проскроллит вниз
    alert('Вы внизу!');
    }
    else{
    alert('Вы листаете вверх!');
    }
    })
Есть ли какие способы в js или jquery, что бы найти полную высоту содержимого блока спрятанного с помощью "overflow-x: 'hidden'"?
Ответ: sad67man, в моем случае это не имеет значение так как текст будет в любом случае большой(пользовательское соглашение), а окно в котором оно находится одного размера. За совет спасибо, попробуем.
Вопрос: Как прокрутить блок влево до нужного места?

Добрый день! Появилась такая задача, которую даже понятия не имею, как возможно решить. Смысл в следующем: при нажатии на блок красного цвета, блок .blk должен прокрутиться влево до левого края экрана. Прошу прощения за тавтологию. И благодарю за помощь!
<style>
.wrp {
display: block;
position: relative;
overflow: hidden;
visibility: visible;
overflow-x: scroll;
width: 100%;
height: 200px;
background: #cccccc;
}
.blk {
display: block;
position: relative;
width: 1000px;
height: 500px;
z-index: 2;
margin-left: 100%;
background: #aabbcc;
}
.knop {
display: block;
position: absolute;
width: 20px;
height: 20px;
right: 10px;
top: 50%;
background: red;
cursor: pointer;
}
</style>
<div class="wrp">
<div class="knop"></div>
<div class="blk"></div>
</div>
Ответ: рони,
прошу прощения за навязчивость. Хоть убейте, не могу понять, какое ограничение? Скопировал код на отдельную чистую страницу. Всё отображается правильно, все блоки верных размеров, как в css. Полосу прокрутки прокручиваю до конца вправо - всё четко работает: прокручивается margin и до конца весь блок, как и должно быть.
Вопрос: Как отобразить в заданном блока overflow-y: scroll на андройде?

На андройде почему то дефолтный скролл, прописанный для блока через
CSS
1
overflow-y: scrol
скрыт, хотелось бы его увидеть на андройде, есть какие варианты?
Ответ: Mailo,
Сообщение от Mailo
Да тут есть, интересно чем он от моего отличается.
этот кастомизирован.
Сообщение от Mailo
Оно как оказалось появляется только при прокрутке
для мобильных клиентов так и должно быть.
Сообщение от Mailo
а можно ли настроить так что бы оно всегда было видно?
кастомизируйте
Вопрос: отслеживание скролинга в блоке с overflow: auto

извините это мой второй вопрос за сегодня, но в интернете вобще нету инфы по этому вопросу

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

<html style="overflow: hidden;display: block;height: auto !important;">

<body style="overflow: hidden;height: 100%;">

<div id="prosmotr1" style="z-index: 900;display: block;visibility: visible;height: 100%;left: 0px;overflow: auto;position: fixed;top: 0px;width: 100%;">
	
	<div id="prosmotr2" style="position: absolute;z-index: 999;width: 1000px;top: 0px;">
		...............................
		...............................
	</div>
	
</div>

</body>

</html>


$('#prosmotr1').on('scroll', function () {
	alert(1);
});
Ответ: sig,
пока непонятно ... может макет и описание?
Вопрос: верстка с overflow

Здравствуйте.
Подскажите пожалуйста как сделать следующее:

1. в окошке (некий блок div) показать как ленту чередующихся блоков в одну строчку, при этом под wraper-ом блок 
не указывать явно ширину. Для ясности, покажу в разметке.
Код

<div id="parent">// тут у нас width:100%; height:100px; overflow-y:hidden; overflow-x:auto;
     <div class="parent_carcas">// вот в этом вот блоке переменая ширина. Можно ли ширину эту обойти и при этом 
//... сожержимое данного блока отображалось в одну линию. Элементов внутри может быть от 1 до большого кол-ва.
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          ....
     </div>   
</div>


2. как сделать отображение по умолчанию в блоке .parent_carcas (см. выше) содержимого по правую строну, а не по левую. 
Т.е. загружается страница и содержимое находится и показывается по правую строну.

Это сообщение отредактировал(а) numerovan - 11.11.2015, 19:57
Ответ:
Цитата

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

Если вы добавите чуть больше блоков с классом "item",  то они пропадают в неизвестность - это из за position:absolute. Тут желательно этот .parent_carcas либо block либо table. И походу да что без ширины его не получится сделать ... хотя может что нибудь другие люди напишут.

Пока ситуацию решил следующим образом: в .parent_carcas{width:2000000px} ... далее яваскриптом подганяю перемещение скролла на право, а так же скриптом выставляю не такую огромную ширины, а только не обходимую, для размещения .item в нем.

Хотелось просто без участия яваскрипта.
Вопрос: Не получается структурировать вёрстку с помощью fl

Не получается сделать макет адаптивным.Мне нужно чтобы левый сайдбар растягивался на всю высоту до самого подвала сайта остальные блоки расположены как задуманно и чтобы расположение их не менялось(было зафиксированное в данном месте на сайте) не зависимо есть в них контент или нет - никак не могу добиться желаемого результата. Подскажите пожалуйста что я делаю не так? Вот код:

Код

!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
    <title>Сайт для племяшки Даши</title>
    <link href="style.css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
<div class="wrapper">
<div class="header">
<h2>Шапка</h2>
</div>
<div class="sidebar-left">
<h2>Левая боковая панель</h2>
<div class="block-left">
</div>
</div>
<div class="sidebar-right">
<h2> правая боковая панель</h2>
<div class="block-lright">
</div>
</div>
<div class="footer">
<h2>Подвал</h2>
fgfhfhyghjtyurtttttttttttttttttttyb  к к енек 
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>


                                      CSS

html,
body{
height: 100%;
}
 body{
  font:14px Tahoma;
 margin:0;
 padding:0;
 background: url(../images/god.jpg) no-repeat 180px 100px;
 width:100%;
 height: 100%;
 overflow-x: scroll;
}
 
.wrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;


}
.header,
.content,
.sidebar-left,
.sidebar-right, 
.footer 
{
    background: red;
    margin: 0px 10px 10px;
    padding: 10px 5px;
    text-align: center;
    border:1px solid  black;
    border-radius: 50px;
}
.header {
width: 100%;
 }
.sidebar-left {
   align-item: flex-start;
   align-self:stretch;
   justify-content:start;
   flex-direction:column;
   width:150px;
  align-content: stretch;      
}
.sidebar-right{
  flex-direction:column;
  align-self:center;
  justify-content: center;
  align-items: center;
  flex-grow:0;
  align-content: flex-end;
  margin-top: 330px;
  opacity: 0.6;
}

.footer {
  lign-item: flex-start;
  margin-top:370px;
  align-self:flex-end;
  justify-content: flex-start;
  align-items: flex-end;
  width:100%;
  flex-direction:row;
  margin-left:0;
  margin-right:0;
}


Ответ:
Не получается сделать макет адаптивным.Мне нужно чтобы левый сайдбар растягивался на всю высоту до самого подвала сайта остальные блоки расположены как задуманно и чтобы расположение их не менялось(было зафиксированное в данном месте на сайте) не зависимо есть в них контент или нет - никак не могу добиться желаемого результата. Подскажите пожалуйста что я делаю не так? Вот код:

Код

!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
    <title>Сайт для племяшки Даши</title>
    <link href="style.css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
<div class="wrapper">
<div class="header">
<h2>Шапка</h2>
</div>
<div class="sidebar-left">
<h2>Левая боковая панель</h2>
<div class="block-left">
</div>
</div>
<div class="sidebar-right">
<h2> правая боковая панель</h2>
<div class="block-lright">
</div>
</div>
<div class="footer">
<h2>Подвал</h2>
fgfhfhyghjtyurtttttttttttttttttttyb  к к енек 
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>


                                      CSS

html,
body{
height: 100%;
}
 body{
  font:14px Tahoma;
 margin:0;
 padding:0;
 background: url(../images/god.jpg) no-repeat 180px 100px;
 width:100%;
 height: 100%;
 overflow-x: scroll;
}
 
.wrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;


}
.header,
.content,
.sidebar-left,
.sidebar-right, 
.footer 
{
    background: red;
    margin: 0px 10px 10px;
    padding: 10px 5px;
    text-align: center;
    border:1px solid  black;
    border-radius: 50px;
}
.header {
width: 100%;
 }
.sidebar-left {
   align-item: flex-start;
   align-self:stretch;
   justify-content:start;
   flex-direction:column;
   width:150px;
  align-content: stretch;      
}
.sidebar-right{
  flex-direction:column;
  align-self:center;
  justify-content: center;
  align-items: center;
  flex-grow:0;
  align-content: flex-end;
  margin-top: 330px;
  opacity: 0.6;
}

.footer {
  lign-item: flex-start;
  margin-top:370px;
  align-self:flex-end;
  justify-content: flex-start;
  align-items: flex-end;
  width:100%;
  flex-direction:row;
  margin-left:0;
  margin-right:0;
}


Вопрос: Вычислять и устанавливать ширину блока до отображения страницы

Приветствую!
На странице есть ссылки, которые сделаны следующим образом:
HTML5
1
2
3
4
5
<div class="sub">
    <div><a href="#">Text</a></div>
    <div><a href="#">Text</a></div>
    <div><a href="#">Text</a></div>
</div>
В CSS я не указываю width для div.sub div. Вместо этого я js-скриптом определяю и устанавливаю ширину следующим образом:
Javascript
1
2
3
4
5
6
7
window.onload = function() {
 
    var elements = document.querySelectorAll('.sub > div');
    for (var i = 0; i < elems.length; i++){
        elements[i].style.width = elements[i].parentElement.offsetWidth / elements.length + 'px';
    }
}
Проблема заключается в том, что иногда при переключении блоки со ссылками отображаются без установленной ширины, а только потом срабатывает js и блоки раздвигаются до нужно ширины.

Подскажите, на на какой обработчик повесить этот скрипт, чтобы он устанавливал ширину до показа страницы? Или может эту задачу можно решить другим простым способом без jquery?
Ответ:
Сообщение от noobie
это я так второй уровень меню делаю
А зачем там что-то высчитывать?
HTML5
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cascading Drop-down Navigation Menu</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font: Verdana;
        padding: 30px;
    }
    /* menu */
    nav ul {
        list-style: none;
    }
    nav ul li{
        position: relative;
        width: 125px;
        text-align: center;
        float: left;
    }
    nav ul li a{
        display: block;
        text-decoration: none;
        padding: 6px 0;
        background: #cfdaf9;
        position: relative;
    }
    nav ul li a:hover{
        background: #a2b7f2;
    }
    nav .sub1 li{
        margin-top: 5px;
    }
    nav .sub1{
        position: absolute;
        left: 0;
    }
    nav .sub2{
        position: absolute;
        left: 125px;
        top: 0;
    }
    nav ul ul{
        display: none;
    }
    nav ul li:hover > ul{
        display: block;
    }
    .darrow::after{
        content: "\25BC";
        position: absolute;
        top: 7px;
        right: 4px;
    }
    nav .sub1 .darrow::after{
        content: "\25BA"; 
    }
    </style>
 </head>
 <body>
    <nav>
        <ul id="menu">
            <li><a href="">text-1</a></li>
            <li><a href="" class="darrow">text-2</a>
                <ul class="sub1">
                    <li><a href="">sub1-text-1</a></li>
                    <li><a href="">sub1-text-2</a></li>
                    <li><a href="" class="darrow">sub1-text-3</a>
                        <ul class="sub2">
                            <li><a href="">sub2-text-1</a></li>
                            <li><a href="">sub2-text-2</a></li>
                            <li><a href="">sub2-text-3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">text-3</a></li>
            <li><a href="" class="darrow">text-4</a>
                <ul class="sub1">
                    <li><a href="">sub1-text-1</a></li>
                    <li><a href="">sub1-text-2</a></li>
                    <li><a href="">sub1-text-3</a></li>
                </ul>
            </li>
            <li><a href="">text-5</a></li>
        </ul>
    </nav>
 </body>
 </html>
Демонстрация
Вопрос: Сделать scroll если высота блока больше 400 px

В блок выводятся некоторые данные. Высота блока может быть разной, в зависимости от данных. Нужно: если высота блока больше 400px, делать блоку overflow-y: scroll;
Можно ли обойтись без js? Если да, в какую сторону копать?
Ответ:
CSS
1
2
3
4
.block{
  max-height:400px;
  overflow-Y: auto;
}
Вопрос: Блок на оставшуюся ширину/ высоту страницы

Всем привет. Хочу сверстать несколько блоков на странице. Шапка, с фиксированной высотой, шириной 100%.

Затем 2 блока. Левый блок с шириной 200px, правый блок, который бы занимал всю оставшуюся часть страницы.

Footer фиксированной высотой, шириной 100%.

Пример во вложении, или по ссылке: [del]

Проблема вот в чём. Как сделать правый блок (3 на макете) размером на всю оставшуюся часть страницы.

И как вообще сделать блоки 2 и 3 высотой на всю оставшуюся часть страницы таким образом, чтобы скролл появлялся только в блоках 2 и 3 если контента в них очень много и этот контент вылазит за пределы блоков?

Вот что смог пока сделать:
HTML5
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
<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</body>
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
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    float:left;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}
Народ, помогите пожалуйста кто знает.
Ответ: С шириной разобрался, а вот как сделать высоту 2 и 3 блока так, чтобы она была равная высоте страницы - высота шапки - высота подвала? И чтоб если блоки 2 и 3 из-за обилия контента не вмещаются в эту область, чтоб скролл появлялся?


HTML5
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
<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</body>
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
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}