Question

我试图解决我的问题，因为一周，我真的尝试了一切！我有两列布局（左：内容/右：内容的描述）。我想要这两列全高页面，我找到的唯一方法是：

body {
        margin: 0;
        height: 100%;
        padding: 0;
}

#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    text-align: right;
}

在我的列中居中div的最接近的方法是使用（在CSS3中）flexbox。但是我的专栏的绝对位置存在冲突。

这是我更明确的bootply： http://www.bootply.com/1OovYNhx1E#

在这个例子中，我想（{水平和垂直）居中<h1>TEXT</h1>

Answer 1

更新

Bootply是一个糟糕的工具。所以我用Plunker来复制你的例子。这包括Bootstrap和你最初的一切，除了：

.fluid-container和.row合并。
#inner现已移出#leftcol
#inner具有前面提到的规则集。
两列都已更改height: 100vh
将position: relative添加到正文。

为html和正文元素添加了width:100%和height:100%。

   #inner {
       position: absolute;
       left: 50%;
       top: 50%;
       bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
       transform: translate(-50%, -50%);
       z-index: 9999;
   }

PLUNKER

<小时/>

OLD

在您的中心元素上使用以下规则集：

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

你并不清楚这个居中的div应该在哪里居中。如果您希望它相对于视口居中（即屏幕的边缘到边缘），则中心div不应位于任何列内。如果你想让它在左栏中居中，那么它就在正确的位置。无论如何，如果你使用这个解决方案，它将完全置于你投入的任何内容之中。

段

＆＃13;

body {
        position: relative;
        margin: 0;
        height: 100%;
        padding: 0;
}

#leftcol {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: left;
    background: brown;
}
#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: right;
    background: yellow;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  outline: 3px solid red;
  width: 25%;
  height: 25%;
  background: rgba(0,0,0,.4);
}

＆＃13;

<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>

＆＃13;

Answer 2

最后找到答案HERE

使用flexbox只需添加到内部容器中：

margin: auto;

它会阻止顶部滚动问题！

中心div（垂直和水平），100％高度div（Bootstrap）

2 个答案:

更新

OLD

段