要使用html& amp;在窗口关闭的页面机身显示：隐藏 [英] Page to cut off at window with html & body display: hidden

查看：108
本文介绍了要使用html& amp;在窗口关闭的页面机身显示：隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

*注意：根据 @aavrug 和@kukkuz ，我已经对问题进行了结构调整，以便它可以完全传达我要问的问题。

*Note: based on the answers by @aavrug and @kukkuz, I have restructured my question so that it fully conveys what I am trying to ask.

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

I have a page layout which has a top nav-bar and a side nav-bar. It also has a main part in which the data is shown. As I only want the main part to scroll, I set html, body { overflow: hidden; } and .main { overflow-y: auto; }. I have further transformed the page into a flex-box after kukkuz's answer. This is what I have so far:

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 在页面下方展开，因此您无法滚动整个页面长度）；但是，如果查看结果页面的底部和右侧，您会发现本应存在的边框不存在，从而使该页面实际上并未在页面的底部被切断。窗口（在右边，>我什至消失在窗口的一侧）。

It seems to work as planned (what I was running into earlier is that the .main - .window in the old question - was expanding below the page and thus you could not scroll the entire page length); however, if you look at the bottom and right side of the resulting page, you will see that the borders which are supposed to be there, are not there, giving to the idea that the page does not actually cut off at the bottom of the window (on the right side, the ">" I put even disappears into the side of the window a bit).

这里是 jsfiddle 。


因此，我的问题是，如何正确使用 html，body {溢出：隐藏; } 仍包含布局的元素，以便完全可见。

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; 但这没用。

In my example above I use html, body { height: 100%; } I have also tried height: 100vh; but that did not work.

PS如果似乎我要对未修订的问题提出一个单独的问题，那么我不是。这仍然是相同的问题，刚才我已经完全提供了所有要素。 Tku。

推荐答案

您可以使用 flexbox ：


  1. 首先将高度：100％放在 body 并删除默认边距。

  1. First put height: 100% on the body and remove the default margins.

包装您的窗口放入 flexbox ，例如：

<div class="window-wrapper">
   <div class="window">
     <!-- more code here -->
   </div>
</div>

.window-wrapper{
  display: flex;
  flex-direction: column;
  height: 100%;
}


。让我知道您对此的反馈。谢谢！

And there you go. Let me know your feedback on this. Thanks!

> 
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. 移除浮子

  1. Remove the floats

用一个具有以下样式的div包裹窗口：

Wrap the window with a div with styles like this:

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


  • 包装侧边栏和内容的容器应具有 flex：1 且不应具有高度：100％。因此添加以下样式：

  • The container that wraps the sidebar and the content should have flex: 1 and should not have height: 100%. So added this style:

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


  • 已删除高度：100％

  • Removed height: 100% from the side too.

    要完成这些操作，请添加 box-sizing：为所有元素设置边框-，以防止溢出。

    To finish things up, added box-sizing: border-box to all elements to prevent the overflows.

    * {
  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>

    这篇关于要使用html&amp; amp;在窗口关闭的页面机身显示：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    • 查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆