Bootstrap3 和 FlexBox，具有 2 列的 100% 高度 div，其中之一可滚动答案

【问题标题】：Bootstrap3 and FlexBox, to have a 100% height div with 2 columns, one of them scrollableBootstrap3 和 FlexBox，具有 2 列的 100% 高度 div，其中之一可滚动
【发布时间】：2019-10-28 23:50:50
【问题描述】：

我想要一个 DIV 100% 高度的页面，并带有 2 个响应列。右边的那个应该是固定的，没有滚动（作为菜单）。右边的应该是可滚动的，左列是独立的。我正在使用 Bootstrap 3 使列具有响应性

______________________________
|           |                |
|           |                |
|           |                |
|           |   y-scroll     |
|           |                |
| no scroll |                |
| vertical  |                |
| centering |                |
|           |                |
|           |                |
|           |                |
|           |                |
------------------------------

=== 更新 ======

这是我的第二次尝试：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div style="display:flex; height:100px; min-height:0; min-height: 100%; width:100%;">
    <div class="row">
         <!-- left -->
        <div class="col-md-2">
              <div style="flex-direction:column; background-color:red;   display:flex;  height:100%;  justify-content: center;">
               <h1 style="color:white;"> I should be fixed and centered</h1>
              </div>
        </div>
         

          <!-- right -->  
         <div class="col-md-10">       
          <div style="flex-direction:column;  flex:1; max-height:100%; overflow-y: scroll; background-color:green;">
            <h1  style="color:white; margin-bottom:600px;"> I should be > 100% height, and scrollable</h1>
              <h1  style="color:white; margin-bottom:600px;"> I should be > 100% height, and scrollable</h1>
          </div>
        </div>        
    </div>

</div>

【问题讨论】：

结合 Bootstrap 3（基于 float）和 Flexbox 是个坏主意。而是使用 Bootstrap 4（基于 Flexbox）
谢谢，在我的下一次更新中，我将使用 Bootstrap 4。我需要这个技巧快速浏览一页

标签： css twitter-bootstrap-3 flexbox

【解决方案1】：

您可以在完全不使用 Bootstrap 或 jQuery 的情况下，只使用 Flex 来实现您想要的大部分功能。

看看这段接近你需要的代码，希望对你有帮助

<h2 class="text-center">2 responsive columns, 1 fixed 1 not</h2>
<div style="display:flex; height:100px; min-height:0; min-height: 100%">
  <!-- left -->
  <div style="flex-direction:column; background-color:red;">
   <h1 style="color:white;"> I should be fixed and centered</h1>
  </div>
  <div style="flex-direction:column;  flex:1; height: 400px; max-height:100%; overflow-y: scroll; background-color:green;">
    <h1  style="color:white;"> I should be > 100% height, and scrollable</h1>
  </div>
</div>

【讨论】：

我需要 Bootstrap 的响应能力，所以在移动设备上我可以隐藏左栏。无论如何，我刚刚尝试了您的集成 Bootstrap 的版本，并且似乎可以正常工作！谢谢
是否跨浏览器？
对不起，但它没有按预期工作......我在我的问题文本中放置了一个可在 codepen 上运行的新版本
这将在支持 flex 的浏览器中工作。有一个网站可以用来检查名为“caniuse.com”的网站。如果需要，可以使用引导程序，但不需要它来提高响应能力。您可以使用 CSS 媒体查询来代替。这就是 Bootstrap 所做的一切，为您包装媒体查询。我的解决方案会奏效，但你将不得不玩高处。祝你好运！

【解决方案2】：

有简单的方法来获得它，但这不是最终的解决方案。

我认为可以删除告诉我们您想要获得什么的 h2 标签。

起初我已经删除了代码中不需要的所有内容：

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>


        <!-- left -->
        <div class="col-md-4">

               <h1 style="color:white;"> I should be fixed and centered</h1>



        </div>


        <!-- right -->
        <div class="col-md-8" style="background-color:green;">

                 <h1  style="color:white;"> I should be > 100% height, and scrollable</h1>


    </div>    

</body>
</html>

下一步是给这两个类一个固定的位置，一左一右。

这是一个快速而肮脏的解决方案，而“左 div”是用“overflow:hidden”声明，“right div”用“overlflow : auto”声明。

* {
margin : 0;
padding : 0;
}
body {
color : #000;
font-family : verdana, sans-serif;
}
p {
padding : 1%;
}
.col-md-4 {
position : fixed;
left : 0;
top : 0;
width : 30%;
height : 100%;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
position : fixed;
right : 0;
top : 0;
width : 70%;
height : 100%;
overflow : auto;
}

这是一个证明此解决方案仍然有效的小提琴： https://jsfiddle.net/Thorske/5tqLpfjy/1/

还有一个本地测试的屏幕截图，它不会生成两个滚动条：

另一个证明应该和不应该滚动的“一切”，根据需要：

但我不得不承认，这不是获得它的最佳方式。

编辑

我已经更新了小提琴，甚至以一种简单的方式来制作这个例子并且左侧div的内容垂直居中。

修改后的html：

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>


        <!-- left -->
        <div class="col-md-4">

               <h1 style="color:white;"> I should be fixed and centered</h1>



        </div>


        <!-- right -->
        <div class="col-md-8" style="background-color:green;">

                 <h1  style="color:white;"> I should be > 100% height, and scrollable</h1>

    </div>    


 </body>
 </html>

更改后的 css：

* {
margin : 0;
padding : 0;
}
body {
color : #000;
font-family : verdana, sans-serif;
}
p {
padding : 1%;
}

@media screen and (min-width:1024px) {
.col-md-4 {
position : fixed;
left : 0;
top : 0;
width : 30%;
height : 100%;
display: flex;
align-items: center;
text-align : center;
justify-content: center;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
position : fixed;
right : 0;
top : 0;
width : 70%;
height : 100%;
overflow : auto;
}
}
@media screen and (max-width:1023px) {
.col-md-4 {
float : left;
width : 100%;
display: flex;
align-items: center;
text-align : center;
justify-content: center;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
float : left;
width : 100%;
}
}

这可能只是一个例子，但它仍然可以正常工作，我并没有真正改变太多来使事情正常进行。

媒体查询会做他们的工作，但我会推荐以更“具体”的方式定义它们。

为了对齐左侧的所有内容，我只添加了 4 行代码：

display: flex;
align-items: center;
text-align : center;
justify-content: center;

更新的小提琴：https://jsfiddle.net/Thorske/5tqLpfjy/11/

【讨论】：

这样，左栏垂直居中取不到，没有响应性
我更新了 fiddle 以匹配居中的内容，还添加了一个带有媒体查询的简单示例。