Проблема с шириной контейнера CSS, не очень хорошо работает с «переполнением»?
Я считаю, что это мой первый пост здесь. Я время от времени работаю с HTML и CSS более 20 лет, но я немного нуб, когда дело касается современного HTML5 и CSS, поэтому я не знаю, то ли я что-то не понимаю, то ли это баг какой-то. (Вероятно, первое.)
Здесь у меня есть макет макета интерфейса. В общем, это должен быть полноэкранный интерфейс (без прокрутки), внутри которого мне нужна панель меню, которая растягивается по всему контейнеру и прокручивается по горизонтали.
<html>
<style>
.fullscreen { width: 100%; height:100%; position: absolute; top: 0px; left: 0px; margin: 0px; }
.border { border: solid black 4px; padding: 8px; }
.menuitem { display: inline-block; width: 300px; height: 300px; border: solid blue 1px; margin: 8px; }
</style>
<div class=fullscreen style = "display: flex;"> <!-- full screen container-->
<div style = "padding: 8px; flex-grow: 1; display: flex;"> <!-- screen padding - doesn't play nice with fullscreen -->
<div class=border style = "min-width: 100px; margin-right: 8px;"></div> <!-- left menu -->
<div class=border style = "flex-grow: 1;"> <!-- right content container, grows to fill remaining space -->
<div class=border style = "max-width: 100%;"> <!-- intermediate container for the scrolling view, should be as wide as permissible -->
<div style = "white-space: nowrap; overflow-x: auto; max-width: 100%;"> <!-- horizontally scrolling view -->
<!-- arbitrary contents of the scrolling view -->
<div class=menuitem></div>
<div class=menuitem></div>
<div class=menuitem></div>
<div class=menuitem></div>
<div class=menuitem></div>
</div>
</div>
</div>
</div>
</div>
</html>
Объектом внимания является вышеупомянутый вид прокрутки. Я пытаюсь ограничить его размер, чтобы он оставался внутри родительского контейнера, но кажется, что его содержимое, хотя и обрезанное, приводит к тому, что родительский контейнер сильно вырастает за пределы экрана.
Я пробовал различные комбинации вложенных контейнеров, ограничивая размеры до разных размеров и т. д.
Одно из наблюдений заключается в том, что это происходит только в том случае, если я устанавливаю для прокрутки максимальную ширину в процентах. Если я укажу количество пикселей, все будет работать так, как я ожидал. Для меня это указывает на то, что размер макета рассчитывается до того, как произойдет отсечение представления прокрутки. Я надеялся, что промежуточный контейнер (закомментированный в коде) поможет это исправить.
Точно так же, если я изменю представление прокрутки, чтобы иметь гораздо меньшую максимальную ширину в процентах (скажем, 10%), этот div действительно станет меньше, но, как ни странно, родительские контейнеры все равно будут вести себя так, как если бы присутствовала полная ширина.
Короче говоря, максимальная ширина, установленная в пикселях, приводит к тому, что размер родительских элементов соответствует моим ожиданиям, но дает неинтуитивные результаты, когда для нее установлено любое процентное значение.
Итак, я что-то неправильно понимаю в концепции процентной ширины? Или, возможно, есть простой атрибут CSS, который решит эту проблему?
Как оказалось, да, это спасение от этой и других проблем, с которыми я столкнулся. 👍
Ответы 3
введите сюда описание изображения
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullscreen {
display: flex;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 8px; /* Adjusted to include the padding in fullscreen */
box-sizing: border-box; /* Ensures padding is included in the width/height */
}
.border {
border: solid black 4px;
padding: 8px;
box-sizing: border-box;
}
.menuitem {
display: inline-block;
width: 300px;
height: 300px;
border: solid blue 1px;
margin: 8px;
}
.left-menu {
min-width: 100px;
margin-right: 8px;
}
.right-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.scrolling-view {
flex-grow: 1;
white-space: nowrap;
overflow-x: auto;
}
</style>
</head>
<body>
<div class = "fullscreen"> <!-- full screen container-->
<div class = "left-menu border"></div> <!-- left menu -->
<div class = "right-content border"> <!-- right content container, grows to fill remaining space -->
<div class = "scrolling-view border"> <!-- horizontally scrolling view -->
<!-- arbitrary contents of the scrolling view -->
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
</div>
</div>
</div>
</body>
</html>Попробуй этот код, братан!
Это даже не ответ. Если я не ошибаюсь в понимании вопроса, он хочет, чтобы прокручиваемые компоненты оставались внутри родительского контейнера, родительский контейнер не должен выходить за пределы ширины страницы, а горизонтальная прокрутка будет работать для отображения переполненного содержимого.
Если вы пытаетесь получить результат согласно верхнему снимку экрана, примените его к контейнеру, представленному ниже <!-- right content container, grows to fill remaining space -->
div.border {
width: 85vw;
}
Хорошо, спасибо! Примерно такой результат мне нужен. Однако, если я правильно понимаю, у него есть два небольших недостатка. Во-первых, он не совсем доходит до правого края; Я бы предпочел решение, которое гарантирует, что оно будет точно на одном уровне с отступом. Кроме того, я не уверен, что результаты будут такими же, если размер дисплея изменится, поскольку величина левого столбца и заполнения не обязательно зависит от размера области просмотра.
@EdM Если вы хотите правильно выровнять все компоненты с использованием vw и vh, вам необходимо заменить все % на vw или vh. Кроме того, да, вы получите тот же результат на любом дисплее, что и в отношении области просмотра, вы можете попробовать различные размеры экрана в элементе проверки. Если вы получили ответ, примите его, он будет отмечен зеленой галочкой😊
Есть много вещей, которые я бы изменил в вашем коде. Позвольте мне сначала исправить ваш код, а затем я объясню, что не так.
<html>
<head>
<style>
.fullscreen { width: 100vw; height: 100vh; overflow: hidden; display: flex; }
.border { border: solid black 4px; padding: 8px; }
.menuitem { display: inline-block; width: 300px; height: 300px; border: solid blue 1px; margin: 8px; }
* {
box-sizing: border-box;
}
body {
margin:0;
}
.outer-container {
display: grid;
}
.inner-container {
white-space: nowrap; overflow-x: auto; max-width: 100%;
}
</style>
</head>
<body>
<div class = "fullscreen"> <!-- full screen container-->
<div style = "flex-grow: 1; display: flex; gap: 8px; margin: 8px"> <!-- screen padding - doesn't play nice with fullscreen -->
<div class = "border" style = "min-width: 100px;"></div> <!-- left menu -->
<div class = "border" style = "flex-grow: 1;"> <!-- right content container, grows to fill remaining space -->
<div class = "border outer-container"> <!-- intermediate container for the scrolling view, should be as wide as permissible -->
<div class = "inner-container"> <!-- horizontally scrolling view -->
<!-- arbitrary contents of the scrolling view -->
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
<div class = "menuitem"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Прежде всего, я бы использовал абсолютное позиционирование, поскольку вы перемещаете его на другую ось Z, которая в данном случае не нужна. Затем используйте единицы измерения vw/vh, если вы хотите всегда иметь полную ширину и высоту устройства (особенно высота может быть необычной). Используйте gap вместо margin, чтобы создать пробелы между контейнерами во флексбоксе (вы уже использовали display: flex, поэтому можете использовать gap).
Наконец, главное, что решает вашу проблему: display: grid.
Разница между flex и grid простыми словами заключается в том, как они вычисляют пространство для элементов. Элемент с display: grid задает правила того, как должны быть нарисованы дети и как должны рассчитываться их размеры, с флексбоксом все наоборот. Дети берут то, что им нужно, поэтому максимальная ширина в данном случае означает 100% необходимой вам ширины. В общем, чтобы все работало так, как вы хотите, вам нужно указать любую ширину, которая прекращает расчет, поэтому px тоже работали — их число ограничено.
Большое спасибо, что нашли время исправить это! Ваше объяснение знакомит с несколькими новыми для меня терминами, которые мне придется изучить дальше, а именно: сетка, зазор и размер коробки. Я попробую и отвечу снова, как только лучше пойму, что делает каждый из них. А пока кое-что: какой элемент должен использовать абсолютное позиционирование и что вы имели в виду под другой осью z?
Только что вернулся, чтобы еще раз сказать спасибо за вашу информацию! Я прочитал «сетку» дисплея, и кажется, что это очень поможет в дальнейшем. (Я только недавно услышал о «flex», поэтому не был полностью уверен в его правильном применении.) Border-box также является отличной вещью, которую стоит изучить; В мое время для достижения этой цели нам приходилось использовать вложенные элементы div с дополнениями из-за несоответствий между браузерами. Рад, что с тех пор они решили эту проблему!
Да, я бы сказал, что сейчас это намного проще, я знаю, о чем вы говорите;) Абсолютное позиционирование выходит за рамки обычного двухмерного потока веб-страниц, и вы можете использовать z-index для размещения элементов в трехмерном измерении (выше или ниже других слои). Его нужно использовать с умом. Его можно использовать, когда внутренний элемент должен быть помещен в контейнер с отключением от своих братьев и сестер (т. е. значок крестика для закрытия всплывающего окна), в этом случае родительский элемент должен иметь позицию: относительная.
Для создания такого макета лучше использовать CSS Grid, чем базовый стиль.