David_Spector Ответов: 1

Как я могу использовать boostrap, чтобы создать столбец с фиксированной высотой

Как использовать Boostrap для создания столбца фиксированной высоты в средней строке, независимо от того, сколько строк текста он отображает (с помощью полосы прокрутки)? Я хочу, чтобы высота была такой, чтобы все три моих строки помещались на 100% в окно просмотра.

Я попытался добавить CSS для атрибутов "высота" и "максимальная высота", но это не сработало. Я использую сетку Bootstrap для создания столбца в строке (середина трех строк) в контейнере-жидкости.

Обратите также внимание, что моя нижняя строка не распространяется на всю ширину окна просмотра.

Что я уже пробовал:

Поиск в Интернете не нашел решения.

Вот мой код:

<body>
	<div class="container-fluid">
		<div id=e_top class="row">
			<div class="col-12">
				<p>Top Row</p>
			</div>
		</div>
		<div id=e_tabs_edits class="row">

			<div class="col-12 col-md-2 flex-column">
				<p>Tab for a.html</p>
				<p>Tab for test.html</p>
			</div>
			<div class="col-12 col-md-10 flex-column">
				<p>Edit window for b.html</p>
				<p id=e_edit1>Edit window for test.html</p>
			</div>

		<div id=e_bottom class="row">
			<div class="col-12">
				<p>Bottom Row</p>
			</div>
		</div>
	</div>
</body>

1 Ответов

Рейтинг:
1

Richard Deeming

Вы можете как-то добраться туда с помощью столбца flexbox и некоторых пользовательских CSS:

<div class="d-flex flex-column vw-100 vh-100">
    <div id="e_top">
        Top row...
    </div>
    <div id="e_tabs_edits">
        Main content...
    </div>
    <div id="e_bottom">
        Bottom row...
    </div>
</div>
html, body {
    overflow: hidden;
}
Демонстрация[^]

Тем не менее, вы, вероятно, лучше использовать CSS Grid layout вместо этого:
CSS Grid Layout - CSS: Каскадные Таблицы Стилей | MDN[^]
Полное руководство по Grid | CSS-трюкам[^]
<div id="main_grid">
    <div id="e_top">
        Top row...
    </div>
    <div id="e_tabs_edits">
        Main content...
    </div>
    <div id="e_bottom">
        Bottom row...
    </div>
</div>
#main_grid {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-areas: "top-row" "main-row" "bottom-row";
    grid-template-rows: auto 1fr auto;
}
#e_top {
    grid-area: top-row;
}
#e_bottom {
    grid-area: bottom-row;
}
#e_tabs_edits {
    grid-area: main-row;
    overflow: auto;
}
Демонстрация[^]