使用html&在窗口处截取的页面机身显示:隐藏 [英] Page to cut off at window with html & body display: hidden

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

问题描述

*注意:基于 @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 { overflow: hidden; }.

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.

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

推荐答案

您可以使用flexbox:

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

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

将您的window包裹到flexbox中，如下所示:

Wrap your window into a flexbox like this:

<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包裹window:

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，并且不应具有height: 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;
}

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

  • Removed height: 100% from the side too.

    为完成此操作，在所有元素中添加了box-sizing: border-box以防止溢出.

    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;在窗口处截取的页面机身显示:隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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