文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >用html & body显示切断窗口的页面:隐藏

问用html & body显示切断窗口的页面:隐藏
EN

Stack Overflow用户
提问于 2016-09-14 03:30:12
回答 2查看 1.7K关注 0票数 4

*注:根据https://stackoverflow.com/users/3129610/aavrug和https://stackoverflow.com/users/6231153/kukkuz的回答，我重新构造了我的问题，使它充分表达了我想要问的问题。

我有一个页面布局，它有一个顶部导航条和一个侧导航条。它还有一个显示数据的主要部分。因为我只想让主体部分滚动，所以我设置了html, body { overflow: hidden; }和.main { overflow-y: auto; }。在库库兹的回答之后，我把页面进一步转换成了一个灵活的框。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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 )在页面下面扩展，因此无法滚动整个页面长度)；然而，如果您查看结果页面的底部和右侧，您会发现本应在那里的边框并不在那里，这就产生了这样的想法:页面并没有在窗口底部被实际切断(在右边，">“我将”>“放入窗口的一侧)。

这也是小提琴。

因此，我的问题是，如何正确地使用html, body { overflow: hidden; }，同时仍然包含布局的元素，使它们完全可见。

在上面的示例中，我使用了html, body { height: 100%; }，我也尝试过height: 100vh;，但这不起作用。

如果我似乎是在向联合国修订的问题提出一个单独的问题，那我就不是。这仍然是一个问题，刚才我已把所有的内容都说出来了。特库。

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-14 04:45:38

您可以使用flexbox来完成这一任务。

  1. 首先将height: 100%放在body上，然后删除默认的页边距。
  2. 将您的window包装成这样的flexbox：

然后就到了。让我知道你对此的反馈。谢谢!

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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. 移除浮子
  2. 使用具有如下样式的div包装window： .窗口包装器{溢出-x:隐藏；溢出-y:自动；flex: 1；} .window {高度: 100%；}
  3. 包装侧边栏和内容的容器应该有flex: 1，而不应该有height: 100%。因此，添加了这种风格： 容器-内部{显示: flex；边距: 0；flex: 1；}
  4. 也将height: 100%从side中删除。
  5. 为了完成这一任务，向所有元素中添加了box-sizing: border-box以防止溢出。

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2016-09-14 03:36:38

在您的div中需要一个小的修改

​

代码语言：javascript
复制
html,
body {
  overflow: hidden;
}

.window {
  margin: 64px;
  overflow-y: auto;
  height: 100px;
}

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

.small {
  height: 16px;
  background-color: #a12;
}
代码语言：javascript
复制
<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>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39482088

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档