Click here to Skip to main content
14,875,778 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How do I use Boostrap to create a fixed-height column in my middle row, no matter how many lines of text it displays (using a scrollbar)? I want the height to be such that all three of my rows fit 100% into the viewport.

I tried adding CSS for "height" and "max-height" attributes, but that didn't work. I am using the Bootstrap Grid to create a column in a row (the middle of three rows) in a container-fluid.

Note also that my bottom row fails to extend over the entire width of the viewport.

What I have tried:

Web searching didn't find a solution.

Here is my code:

HTML
<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>
Posted
Updated 2-Nov-20 4:47am

1 solution

You can sort-of get there with a flexbox column and some custom CSS:
HTML
<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>
CSS
html, body {
    overflow: hidden;
}
Demo[^]

However, you'd probably be better to use CSS Grid layout instead:
CSS Grid Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Grid | CSS-Tricks[^]
HTML
<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>
CSS
#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;
}
Demo[^]
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900