html - How do I specify the full height of the screen without vertical scrollable?

Question

Welcome To Ask or Share your Answers For Others

html - How do I specify the full height of the screen without vertical scrollable?

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

html - How do I specify the full height of the screen without vertical scrollable?

I would like the orange and blue area to go to the end of the screen or have the full size of the screen minus the height of the navbar. As soon as I use vh-100 it has the full height but it creates a vertical scrollbar which I don't want. So I want the full height of the screen or total height without a scrollbar. How do I do that? Is there anything in Bootstrap like vh-100 - height of the navbar so that everything fits (but there is no 'real' height of the navbar. So I didn't defined the height of the navbar)? Or how can I say that it should take the full height without creating a vertical scrollbar?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
      <div class="row m-auto">
        <div class="col-md-12 p-0">
            <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">
                    Navbar w/ text
          </a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarText"
                    aria-controls="navbarText"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">
                                Home <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Features
                </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Pricing
                </a>
                        </li>
                    </ul>
                    <span class="navbar-text">Navbar text with an inline element</span>
                </div>
            </nav>
        </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4 bg-warning vh-100"> <!-- vh-100 -->
                        <div>
                  <div class="row m-1">
                    <div class="col-md-11">
                      Chats
                  </div>
                    <div class="col-md-1">
                      <i class="fas fa-plus-circle"></i>
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-md-12">
                      <form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
                        <input class="form-control  mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                      </form>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="list-group">
                        <div>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small>3 days ago</small>
                </div>
                <div class="row">
                    <div class="col-md-11">Donec id elit non mi porta...
                    </div>
                    <div class="col-md-1">
                        <span class="badge badge-primary badge-pill text-right">5</span>
                    </div>
                </div>
            </a>
        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-8 bg-primary vh-100"> <!-- vh-100 -->
                  <div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                          <div class="row">
                          <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                              <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                  <img src="..." class="image-head-chat" alt="Responsive image" />
                              </div>

                              <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                  Text
                              </div>

                              <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                  Icons
                              </div>
                           </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Nachrichten
            </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Eingabe
              <div class="row">
                                Form
              </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:13:45+0000

One way is to use height: calc(100vh – 3.5rem) on the row to set the height on the bottom section equal to the view port height less the height of the navbar (56px or 3.5rem).

Or the other option, which I’ve added to your code, is to use flex.

Calc will work on all modern browsers, plus IE9 and up, while flex works on all modern browsers, plus IE11.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<div class="container-fluid vh-100 d-flex flex-column no-gutters px-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            Navbar w/ text
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Features
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Pricing
                    </a>
                </li>
            </ul>
            <span class="navbar-text">Navbar text with an inline element</span>
        </div>
    </nav>

    <div class="container-fluid d-flex flex-grow-1 flex-column">
        <div class="row flex-grow-1">
            <div class="col-md-4 bg-warning">
                <!-- vh-100 -->
                <div>
                    <div class="row m-1">
                        <div class="col-md-11">
                            Chats
                        </div>
                        <div class="col-md-1">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <form class="form-inline" style="height: 0%; width: 100%; padding-left: 0; padding-right: 0; padding-top: 8px">
                                <input class="form-control  mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="list-group">
                                <div>
                                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="margin-top: 7.5px; margin-bottom: 7.5px">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">List group item heading</h5>
                                            <small>3 days ago</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-11">Donec id elit non mi porta...
                                            </div>
                                            <div class="col-md-1">
                                                <span class="badge badge-primary badge-pill text-right">5</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 bg-primary">
                <div>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="row">
                                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            <img src="..." class="image-head-chat" alt="Responsive image" />
                                        </div>

                                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            Text
                                        </div>

                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            Icons
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Nachrichten
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Eingabe
                                    <div class="row">
                                        Form
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Categories

html - How do I specify the full height of the screen without vertical scrollable?

html - How do I specify the full height of the screen without vertical scrollable?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags