CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
sysnickm
sysnickm

Reputation: 79

stretch nested columns to full height without scrolling

Using bootstrap 4.6 I'm trying to build an interface with a left main menu, and then a right context menu that is part of a child row. I'd like the backgrounds of both of these menus to stretch to the bottom of the view, however everything I've tried ends up creating scroll bars with the right menu being longer than the left

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <body style="height: 100%;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 bg-primary">
                    <h1>Logo</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-2 bg-secondary pt-2">
                    <h5>Main Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3">
                            Menu 1
                        </li>
                        <li class="nav-item pl-3">
                            Menu 2
                        </li>
                        <li class="nav-item pl-3">
                            Menu 3
                        </li>
                    </ul>
                </div>
                <div class="col p-0">
                    <div class="p-4 bg-warning">
                        <h3 class="m-0">Header</h3>
                        <div class="text-secondary">Subheader</div>
                    </div>
                    <div class="row no-gutters">
                        <div class="col ml-3 mr-2">
                            <h1>Lorem Ipsum</h1>

                            <p>Lorem ipsum </p>                
                        </div>
                        <div class="col-2 bg-danger p-2">
                            <h5>Context Menu</h5>
                            <ul class="nav flex-column">
                                <li class="nav-item pl-3">
                                    Menu 1
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 2
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 3
                                </li>
                            </ul>  
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>

This is the output. screenshot of current state

Is there a way using standard bootstrap or css that would allow me to have both the left and right menus end at the same point, and not have scroll bars unless the main content calls for it?

Upvotes: 0

Views: 134

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362260

You'll want to use the flexbox, sizing and overflow utility classes...

  • d-flex flex-column to set flexbox
  • flex-fill to make a flexbox child fill (stretch) the remaining height
  • overflow- as need for scrolling
<div class="container-fluid vh-100 d-flex flex-column">
    <div class="row">
        <div class="col-12 bg-primary">
            <h1>Logo</h1>
        </div>
    </div>
    <div class="row flex-fill overflow-hidden">
        <div class="col-2 bg-secondary pt-2">
            <h5>Main Menu</h5>
            <ul class="nav flex-column">
                <li class="nav-item pl-3"> Menu 1 </li>
                <li class="nav-item pl-3"> Menu 2 </li>
                <li class="nav-item pl-3"> Menu 3 </li>
            </ul>
        </div>
        <div class="col p-0 h-100 overflow-hidden d-flex flex-column">
            <div class="p-4 bg-warning">
                <h3 class="m-0">Header</h3>
                <div class="text-secondary">Subheader</div>
            </div>
            <div class="row no-gutters flex-fill overflow-auto">
                <div class="col ml-3 mr-2">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum </p>
                    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                </div>
                <div class="col-2 bg-danger p-2">
                    <h5>Context Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3"> Menu 1 </li>
                        <li class="nav-item pl-3"> Menu 2 </li>
                        <li class="nav-item pl-3"> Menu 3 </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/jnyyitC7VU

Upvotes: 1

Related Questions