Question

如何在下面完成此css问题？

当屏幕有足够的空间来保持元素可见时。

但是一旦窗口缩小并且没有足够的空间让它们以原始尺寸可见，顶部和底部元素就会粘在原始尺寸的垂直边上，只有中间元素会缩小。 / p>

我陷入了这种状态。它看起来几乎接近答案，但实际上并非......

http://embed.plnkr.co/AJXYCGEVzMPt1My0xehA/

Stack snippet

＆＃13;

/* Styles go here */

.wrapper {
  height: 100vh;
}

.top {
  width: 40%;
  height: 50px;
  background-color: green;
}

.middle {
  width: 90%;
  height: 300px;
  background-color: blue;
  margin-top: 30px;
  margin-bottom: 30px;
}

.bottom {
  width: 20%;
  height: 50px;
  background-color: red;
}

＆＃13;

<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    
    <div class="wrapper d-flex flex-column align-items-center justify-content-center">
      <div class="top col-auto">Top Element</div>
      <div class="middle col-auto">Middle Element</div>
      <div class="bottom col-auto">Bottom Element</div>
    </div>

＆＃13;

Answer 1

如果我理解你正在尝试做什么，那就是flex。

只需设置一个具有最大高度的flex容器（具有实际height属性，不要使用max-height或者它的flex项目将无法增长，并且中间部分根本不显示），然后将底部和顶部元素设置为flex:0 0 100px，这样它们就不会增长/缩小，并允许中间元素随flex: 1 1 auto;

增长和缩小

并将主体本身设置为flex-container，因此flex-container也是一个flex-item，可以使用justify-content轻松居中

实际工作版本： https://embed.plnkr.co/pajfCNCacQX6kuBf6I8z/

这是一个SO片段...无法调整大小，因此无法测试，只是为了保证代码安全：

body{
  height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.container{
  display:flex;
  flex-direction:column;
  height: 500px;
}

.top{
  background:CornflowerBlue;
  flex: 0 0 50px;
}

.center{
  flex:1 1 auto;
  margin:10px 0;
  background:salmon;
}

.bottom{
  flex: 0 0 50px;
  background:MediumSeaGreen ;
}

<body>
    <div class="container"> 
      <div class="top">
      </div>
      <div class="center">
      </div>
      <div class="bottom">
      </div>
    </div>
  </body>

Answer 2

您需要将flex-shrink:0用于顶部和中间div，以便在调整视口大小时它们不会缩小

<强> Fiddle Link ▸

Stack Snippet

body {
  margin: 0;
}

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.top,
.bottom {
  margin: 0 30px;
  flex-shrink: 0;
  background: red;
}

.middle {
  background: blue;
  overflow: auto;
}

<div class="parent">
  <div class="item top">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="item middle">. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur
    ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
  <div class="item bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
</div>

垂直居中，但在窗户收缩时保持顶部和底部粘性

2 个答案: