#html #css #flexbox
Вопрос:
У меня есть дочерний элемент flex, внутри прокручиваемой колонки flex. Я хочу, чтобы он установил свою ширину на 100% от родительского столбца с возможностью прокрутки.
Это потому, что я хочу иметь панель уведомлений, и она автоматически открывается, если приходит новое уведомление, и в настоящее время содержимое прокручиваемого гибкого трубопровода перемещается (каждый элемент является гибким).
Позвольте мне продемонстрировать:
div { display: flex; } .row { flex-direction: row; } .col { flex-direction: column; } .target-width { height: 100%; width: 500px; height: 500px; } .scrollable { overflow: scroll; height: 100%; flex: 1; } .content { background: yellow; width: 100%; height: 100%; } .notifications { background: blue; height: 100%; flex-basis: 200px; } lt;div class='row target-width'gt; lt;div class='col scrollable'gt; lt;div class='col content'gt;contentlt;/divgt; lt;/divgt; lt;div class='col notifications'gt;lt;/divgt; lt;/divgt; В приведенном выше примере я ожидал content бы иметь ширину 500px , даже если его прямой родитель scrollable имеет ширину 300px .
Давайте предположим, что каждая ширина и высота неизвестны, вышесказанное просто для демонстрации. Итак, все, что мы знаем, это то, что мы хотим установить content ширину как ширину target-width . Не зная точно ширины target-width , есть ли способ заставить это работать?
Комментарии:
1. Привет! «целевая ширина» является родителем «прокручиваемых» и «уведомлений». Таким образом, его ширина делится на этих двух детей. Я не совсем понял проблему: вы хотите, чтобы «прокручиваемый» имел полную ширину «целевой ширины» ?
2. И тот
contentимеет ширину своего родителя,scrollable. И я объяснил выше, почему у него такая ширина.3. У меня недостаточно репутации, чтобы комментировать. Теперь «содержимое» и «панель уведомлений» являются гибкими элементами в гибком контейнере. «содержимое» и «панель уведомлений» находятся на одном уровне, а «содержимое» использует пространство, оставленное «панелью уведомлений» (гибкая база: 200 пикселей;). Вы хотите получить этот результат, или вы хотите, чтобы «панель уведомлений» шириной 200 пикселей отображалась над «содержимым» шириной 100% контейнера?
4. Вы хотите сказать
.content, что хотите перекрыть столбец уведомлений? Это дочерний элемент элемента в гибкой строке, который включает уведомления, поэтому он никогда не будет перекрываться, если вы не используете абсолютное позиционирование.5. Не только с помощью CSS и flexbox. Вы можете использовать JavaScript для установки относительной ширины, когда вы это знаете.
Ответ №1:
Я думаю, что понимаю вашу потребность, и я не совсем уверен, можно ли это сделать только с помощью css.
Вот код JS, который может решить вашу проблему. Пожалуйста, имейте в виду, что мое решение, возможно, не самое лучшее, но я думаю, что это отправная точка.
Поместите этот код в голову:
lt;script type="text/javascript"gt; function setContentWidth() { var elementTW = document.querySelector('.target-width'); var styleTW = window.getComputedStyle(elementTW); var widthTW = styleTW.width; document.querySelector(".content").setAttribute("style","width:" parseInt(widthTW) "px" ); } window.onload = setContentWidth; lt;/scriptgt; Отредактировал свой ответ, чтобы он соответствовал вопросу. Теперь content получите родительскую ширину.
Скажите мне, решит ли это вашу проблему или вам нужна дополнительная помощь.
Комментарии:
1. Это могло бы решить проблему, но я искал решение CSS.
2. Тогда я не знаю решения только с помощью CSS. Может быть, если вы используете sass, у вас может быть что-то вроде этого:
$width:100px; .target-width{ width: $width; } .content{ width: $width; }
Ответ №2:
Я не уверен, что это решение того, что вы ищете. Я внес некоторые изменения в код, чтобы воспроизвести то, чего, как мне кажется, я понимаю, вы хотите достичь. Не могли бы вы просмотреть его и сказать мне, тот ли это результат, который вы ищете?
div { display: flex; box-sizing: border-box; } .row { flex-direction: row; } .col { flex-direction: column; } .target-width { /*width:500px;*/ width: 100%; height: 100vh; position:relative; } .scrollable { overflow-y:hidden; overflow-x: auto; height: 100%; width:100%; flex: 1; } .content { background: yellow; width: 100vw; height: 100%; } .notifications { background: blue; opacity:.5; height: 100vh; width: 100px; position:absolute; z-index:1; right:0; } lt;div class='row target-width'gt; lt;div class='col scrollable'gt; lt;div class='col content'gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam quis erat ut rhoncus. Nunc non sollicitudin eros. Vivamus sollicitudin, orci vitae congue rutrum, lacus nulla blandit dolor, nec egestas est est eu est. Donec mi metus, tempor quis ante quis, viverra ornare nulla. Aliquam fringilla pharetra nisi, ac bibendum tortor rhoncus auctor. Sed quam elit, finibus vel dignissim rhoncus, viverra ut risus. Sed placerat, massa et vehicula feugiat, ex augue pulvinar tortor, eget sodales sem libero non metus. Fusce laoreet sollicitudin erat a posuere. Mauris at sem metus. Sed posuere quam bibendum malesuada auctor. Ut pulvinar eros quis massa molestie, sed tempus urna ultrices. Vivamus arcu turpis, porta ut vehicula at, dapibus vitae massa. Nulla facilisi. Curabitur a dignissim purus. Morbi rhoncus sit amet mauris sed viverra. Sed eget justo eget dui commodo vehicula. Pellentesque convallis ultricies quam, ac maximus purus mollis vitae. Nam ut erat erat. Ut ultrices quam magna, vel efficitur massa finibus nec. Maecenas turpis tellus, tempus ut iaculis quis, elementum rhoncus nunc. Quisque egestas condimentum nunc, non feugiat erat malesuada eu. Donec in justo ullamcorper, molestie justo ac, elementum leo. Morbi ultricies et sapien sit amet bibendum. Sed ornare eget lectus vel tempor. Suspendisse sodales ipsum in tincidunt dictum. Duis placerat ligula ac sem imperdiet sollicitudin. Pellentesque ex risus, rutrum vel mi sed, egestas faucibus nisl. Mauris rutrum sem justo, eget posuere neque aliquam non. Sed molestie neque mauris, quis gravida turpis rutrum eget. Duis eu mauris vitae arcu suscipit sagittis. Duis aliquam tortor quis massa placerat vestibulum. Fusce eu purus non eros ornare aliquam a accumsan turpis. Maecenas eu nunc dignissim, ornare diam et, malesuada est. Donec eu commodo libero. Donec fermentum metus in quam lobortis, ut eleifend felis posuere. Donec sed leo malesuada, viverra tellus sit amet, egestas leo. Cras tempus, ex et tincidunt varius, magna mauris dignissim ex, in mattis dui erat eu arcu. Praesent tristique faucibus massa eget malesuada. Aliquam vitae enim quam. Phasellus maximus ullamcorper leo, auctor luctus ipsum volutpat quis. Ut nec neque non felis bibendum ultricies. Cras leo odio, condimentum et eros at, feugiat lacinia sem. Sed odio sem, lobortis sed enim vitae, bibendum faucibus velit. Ut eget diam consequat, imperdiet sem at, hendrerit ligula. Mauris egestas consequat magna, gravida fermentum leo malesuada pellentesque. Sed non pellentesque purus, at congue arcu.lt;br/gt;lt;/divgt; lt;/divgt; lt;div class='col notifications'gt; lt;/divgt; lt;/divgt;