Fatal编程技术网
  • css/
  • Css Bootstrap3和FlexBox，有一个100%高度的div，有两列，其中一列可滚动

Css Bootstrap3和FlexBox，有一个100%高度的div，有两列，其中一列可滚动

css twitter-bootstrap-3

Css Bootstrap3和FlexBox，有一个100%高度的div，有两列，其中一列可滚动,css,twitter-bootstrap-3,flexbox,Css,Twitter Bootstrap 3,Flexbox,我想有一个100%高度的DIV页面，有两个响应列。右边的那个应该是固定的，没有滚动（作为菜单）。右边的那个应该是可滚动的，左边的列是独立的。我正在使用Bootstrap3使列具有响应性 ______________________________ | | | | | | | | | | | y-scroll | |

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

______________________________
|           |                |
|           |                |
|           |                |
|           |   y-scroll     |
|           |                |
| no scroll |                |
| vertical  |                |
| centering |                |
|           |                |
|           |                |
|           |                |
|           |                |
------------------------------
==更新======

这是我的第二次尝试：


我应该是固定的，居中的
我应该>100%的高度，并且可以滚动
我应该>100%的高度，并且可以滚动
无需使用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>    


2个响应列，1个已修复1个未修复
我应该是固定的，居中的
我应该>100%的高度，并且可以滚动
有一种简单的方法可以实现这一点，但它不是最终的解决方案

我认为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的内容垂直居中

更改的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>
这可能只是一个例子，但仍然很好， 我真的没有做太多的改变来让事情顺利进行

媒体查询将完成这些工作，但我建议 以更“具体”的方式定义它们

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

display: flex;
align-items: center;
text-align : center;
justify-content: center;
更新后的fiddle:

将bootstrap3（基于
float
）和Flexbox结合起来是个坏主意。请改用Bootstrap4（基于Flexbox）谢谢，在我的下一次更新中，我将使用Bootstrap4。我只需要在一个页面上快速使用这个技巧，我需要引导来实现响应，这样在移动设备上我就可以隐藏左栏。不管怎样，我刚刚尝试了你的集成引导的版本，看起来很有效！谢谢，是跨浏览器的吗？很抱歉，它没有按预期工作。。。在我的问题文本中，我在codepen上放了一个新版本runnable，它将在支持flex的浏览器中工作。有一个名为“caniuse.com”的网站可以用来检查，如果你愿意，你可以使用bootstrap，但你不需要它来响应。您可以使用CSS媒体查询来代替。这就是Bootstrap所做的，为您包装媒体查询。我的解决办法行得通，但你必须适应高度。祝你好运这样一来，我就无法在左列中找到垂直中心，也没有响应。我已经更新了小提琴以匹配中心内容，还添加了一个简单的媒体查询示例。 
* {
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%;
}
}

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