1. 首页
  2. 问题列表
  3. 导航栏+2个全高栏+带Flexbox的页脚
提问者：小点点

导航栏+2个全高栏+带Flexbox的页脚


由此产生的每一个单独的问题都已经得到解决:

  • 如何在FlexBox中放置导航栏
  • 如何在FlexBox中放置2个全高列
  • 如何放置仅出现在列结尾之后的页脚。

但我不知道同时做3个。

我想要的是:

由于文本较少，两列展开，但页脚留在底部。 不显示滚动条。

+------------------------------+   
|            NAVBAR            |    
|-------------+-+------------+-|
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
+------------------------------+   
|           FOOTER             |    
<========END OF SCREEN=========>

对于大量文本，页脚不会出现。 将显示滚动条。 滚动后，页脚出现在底部。

+------------------------------+   
|            NAVBAR            |    
|-------------+-+------------+-|
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |    
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |   
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |    
||            | | blah blah  | |   
||            | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
<========END OF SCREEN=========>

滚动后:

||            | | blah blah  | |    
||            | | blah blah  | |   
||            | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
+------------------------------+   
|           FOOTER             |    
<========END OF SCREEN=========>

下面是一个最接近解决方案的片段:

null

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
header, footer {
  flex-grow: 0;
}
main {
  flex-grow: 1;
  
}
footer {
  background-color: #eee;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>
<main role="main">
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
      <div class="col" id="red">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique 
</div>
<div class="col" id="blue">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus 
    </div>
    </div>
  </div>
  </main>
  <footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
  </div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  </body>
</html>

null

但如果只有几个文本，则列不会扩展:进入代码片段的“full page”，可以看到蓝色和红色的列不会扩展）。


共2个答案

匿名用户

继续对主容器和行执行flex-grow。。。

<main role="main" class="d-flex">
    <div class="container d-flex flex-column flex-grow-1">
        <h1>Hello, world!</h1>
        <div class="row flex-grow-1">
            <div class="col" id="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique
            </div>
            <div class="col" id="blue">
                <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
            </div>
        </div>
    </div>
</main>

演示:https://codeply.com/p/h6hqfiftqn

相关:Bootstrap 4 Flexbox强制行填充列内的垂直空间

匿名用户

试了一下:

html, body, main
{
  height: 100%;
}
footer {
  background-color: #eee;
  position:fixed;
  bottom:0;
  width:100%;
display:block;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

null

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
html, body, main
{
  height: 100%;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

header,
footer {
  flex-grow: 0;
}

main {
  flex-grow: 1;
}

footer {
  background-color: #eee;
  position: fixed;
  bottom: 0;
  width: 100%;
  display:block;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <title>Hello, world!</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <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="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>
  <main role="main">
    <div class="container">
      <h1>Hello, world!</h1>
      <div class="row">
        <div class="col" id="red">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur
            adipiscing elit duis tristique
        </div>
        <div class="col" id="blue">
          <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum
            velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
        </div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3">
    <div class="container">
      <span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
    </div>
  </footer>
  <!-- Optional JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS