Question

我有一个fiddle，其中我有两个div堆叠在一起，每个50%都占据了页面高度的div。

到目前为止它运作良好，但我决定在每个内部添加一个height: 250px，其特定属性为500px。在这种新情况下，如果屏幕的高度低于<div id="top"></div>，则div的内容将被隐藏。

有没有办法让元素<div id="bottom"></div>和div.new-content.centered获得body的高度并使整个<div id="top"></div>溢出？最终结果是<div id="bottom"></div>和body { overflow: auto; } #top, #bottom { position: fixed; left: 0; right: 0; height: 50%; } #top { top: 0; background-color: orange; } #bottom { bottom: 0; background-color: green; } .centered { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .new-content { height: 250px; width: 25%; } .blue { background-color: blue; } .red { background-color: red; }保持新的高度，并在页面中保持相同的位置。

提前感谢您的回复！

<div id="top">
  <div class="new-content centered red"></div>
</div>
<div id="bottom">
  <div class="new-content centered blue"></div>
</div>

<ListBox ItemsSource="{Binding Path=TheApp.Generator.DataList, RelativeSource={RelativeSource AncestorType=Window}}" />

Answer 1

我更改了布局策略以使用flex。另外，我通过左右边距设置auto来居中内部div。请看看这是否解决了这个问题。

<强>更新

添加了使用javascript计算内容块的上边距偏移的解决方案，允许块垂直居中。

＆＃13;

var els = document.getElementsByClassName('new-content');

verticalCenterContent = function() {
  for (i = 0; i < els.length; i++) {
    var containerHeight = els[i].parentNode.offsetHeight;
    var topOffset = containerHeight / 2 - els[i].offsetHeight / 2;
    if (topOffset > 0) {
      els[i].style.marginTop = topOffset + 'px';
    }
    else {
      els[i].style.marginTop = 0 + 'px';    
    }
  }
}

window.onresize = function(event) {
  verticalCenterContent();
};

verticalCenterContent();

＆＃13;

body {
  overflow: auto;
  padding:0;
  margin:0;
}

.container {
  display:flex;
  flex-direction:column;
}

#top,
#bottom {
  flex: 1 1 50vh; /* shorthand for flex-grow flex-shrink flex-basis */
}

#top {
  background-color: orange;
}

#bottom {
  background-color: green;
}

.centered {
  margin: 0 auto 0 auto;
}

.new-content {
  height: 250px;
  width: 25%;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

＆＃13;

<div class="container">
  <div id="top">
    <div class="new-content centered red"></div>
  </div>
  <div id="bottom">
    <div class="new-content centered blue"></div>
  </div>
</div>

＆＃13;

调整堆叠在彼此顶部的两个div上的内容，高度为页面的50％ - CSS

1 个答案: