html - 要在带有 html 和正文显示的窗口处截断的页面 : hidden

Question

*注意:基于 @aavrug 的回答和 @kukkuz ，我重组了我的问题，以便它能完整传达我想问的问题。

我有一个页面布局，它有一个顶部导航栏和一个侧边导航栏。它还有一个显示数据的主要部分。因为我只想滚动主要部分，所以我设置了 html, body { overflow: hidden; } 和 .main { overflow-y: auto; }。我在 kukkuz 之后进一步将页面转换为 flexbox 的回答。这是我目前所拥有的:

html,
body,
.container {
  overflow: hidden;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
}
.column {
  flex-flow: column;
}
div {
  border: 1px dotted green;
  margin: 2px;
}
.top,
.side {
  float: left;
  display: flex;
}
.side span {
  align-self: flex-end;
}
.top span{
  margin-left: auto;
}
.top {
  background-color: steelblue;
  height: 128px;
  width: 100%;
  /* This might be code-smell as a div already is a block element, but removing it doesn't make the layout work */
}
.side {
  background-color: gold;
  width: 128px;
  height: 100%;
}
.main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
}
.big {
  height: 32px;
  background-color: #369;
}
.small {
  height: 16px;
  background-color: #a12;
}

<div class="container column">
  <div class="top"><span>Where is the green border at the side??? ></span></div>
  <div class="container">
    <div class="side"><span>Where is the green border at the bottom??? \/<span></div>
    <div class="main">
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
    </div>
  </div>

</div>

它似乎按计划工作(我之前遇到的是旧问题中的 .main - .window - 在页面下方扩展，因此您无法滚动整个页面长度)；但是，如果您查看结果页面的底部和右侧，您会发现应该存在的边框并不存在，这让人觉得页面实际上并没有在页面底部被切断窗口(在右侧，我放置的“>”甚至消失在窗口的一侧)。

这是 jsfiddle

Thus, my question is, how would one properly use html, body { overflow: hidden; } while still containing the laid out elements so that they are fully visible.

在上面的示例中，我使用了 html, body { height: 100%; } 我也尝试过 height: 100vh; 但没有成功。

附言如果看起来我是在针对未修改的问题提出一个单独的问题，我不是。这还是一样的问题，刚才我已经把所有的要素都给它完整提供了。啧啧。

Answer 1

你可以使用 flexbox 来做到这一点:

1. 首先将 height: 100% 放在 body 上并移除默认边距。

2. 像这样将您的 window 包装到 flexbox 中:

   <div class="window-wrapper">
      <div class="window">
        <!-- more code here -->
      </div>
   </div>
   
   .window-wrapper{
     display: flex;
     flex-direction: column;
     height: 100%;
   }
   

好了。让我知道您对此的反馈。谢谢!

html,
body {
  overflow: hidden;
  margin: 0;
  height: 100%;
}
.window-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.window {
  margin-top: 128px;
  margin-left: 128px;
  overflow-y: auto;
}
.big {
  height: 32px;
  background-color: #369;
}
.small {
  height: 16px;
  background-color: #a12;
}

<div class="window-wrapper">
  <div class="window">
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
    <div class="big">
      I'm big
    </div>
    <div class="small">
      I'm small
    </div>
  </div>
</div>

更新的答案:

1. 移除 float

2. 用样式如下的 div 包裹 window:

   .window-wrapper {
     overflow-x: hidden;
     overflow-y: auto;
     flex: 1;
   }
   .window {
     height: 100%;
   }
   

3. 包裹侧边栏和内容的容器应该有 flex: 1 并且不应该有 height: 100%。所以添加了这个样式:

   .container-inner {
     display: flex;
     margin: 0;
     flex: 1;
   }
   

4. 也从 side 中删除了 height: 100%。

5. 为了完成这件事，向所有元素添加了 box-sizing: border-box 以防止溢出。

* {
  box-sizing: border-box;
}

html,
body,
.container {
  overflow: hidden;
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
}

.container-inner {
  display: flex;
  margin: 0;
  flex: 1;
}

.column {
  flex-flow: column;
}

div {
  border: 1px dotted red;
  margin: 2px;
}

.top {
  background-color: steelblue;
  height: 128px;
  width: 100%;
  /* This might be code-smell as a div already is a block element, but removing it doesn't make the layout work */
}

.side {
  background-color: gold;
  width: 128px;
}

.window-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
}
.window {
  height: 100%;
}

.big {
  height: 32px;
  background-color: #369;
}

.small {
  height: 16px;
  background-color: #a12;
}

<div class="container column">
  <div class="top"></div>
  <div class="container-inner">
    <div class="side"></div>
    <div class="window-wrapper">
    <div class="window">
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
      <div class="big">
        I'm big
      </div>
      <div class="small">
        I'm small
      </div>
    </div>
    </div>
  </div>

</div>