以未知高度居中响应 div 并启用完全垂直滚动

Posted 2023-03-05

【中文标题】以未知高度居中响应 div 并启用完全垂直滚动

【英文标题】：Center responsive div with unknown height and enable full vertical scroll

【发布时间】：2016-01-18 11:03:59

【问题描述】：

我正在尝试使高度未知的 div 居中。

当视口高度小于 div 高度时，我找不到允许滚动到 div 顶部的解决方案。

html

<div>
  <p>This will be hidden when <br />
  window_height < div_width</p>
  <br />
  <br />
  <br />
 How to make it scroll to the top?
</div>

CSS

    body 
      background: grey;
    
    p
      background: green;
    
    div 
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      transform: translate(-50%, -50%);
      max-width: 500px;
      width:100%;
      height: 700px; /* Unknown*/
      padding: 20px;  
      background: red;
      color: white;
      text-align: center;
    

http://codepen.io/Koopa/pen/GpypdX

谢谢

【问题讨论】：

“我找不到允许在 viewport_height

【参考方案1】：

您无法滚动到div 顶部的原因是，带有负值的transform 属性会将div 定位在较小的屏幕上。

在此演示中，transform 被禁用：http://codepen.io/anon/pen/wKpMyM

此外，当您对元素应用绝对定位时，您会将其从文档的normal flow 中取出。这意味着它被其容器忽略。因此，body 和 html 元素的高度为零。

在此演示中，body 有一个绿色边框（完全折叠）：http://codepen.io/anon/pen/RWxrod

要使您的布局正常工作，您可以为body 指定一个最小高度（这样它就可以与div 一起扩展），并且使用flexbox 代替绝对定位居中。

CSS

html  height: 100%;  /* necessary for percentage heights to work */

body 
    background: grey;
    border: 10px solid green; /* for demo purposes */
    min-height: 100%; /* allow body to expand with children */
    display: flex; /* establish flex container */
    justify-content: center; /* center div horizontally, in this case */
    align-items: center; /* center div vertically, in this case */


p 
  background: green;


div 
    /* REMOVE
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */

    box-sizing: border-box;
    max-width: 500px;
    width:100%;
    height: 700px; /* Unknown*/
    padding: 20px;  
    background: red;
    color: white;
    text-align: center;

演示：http://codepen.io/anon/pen/OyzMvV

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。

【讨论】：

因为浏览器支持，我实际上想远离 flex-box，但是我现在将放弃 IE9。 flex-box 太有用了；）感谢您的回答