Question

我想创建一个页面，其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>

Answer 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>

Answer 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>

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

这是快速而肮脏的解决方案，而“ left 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/

Bootstrap3和FlexBox，具有两个列的100％高度div，其中之一可滚动

2 个答案: