使用html&在窗口处截取的页面机身显示:隐藏

更新时间：2023-10-28 19:37:10

您可以使用flexbox:

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

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>

更新的答案:

移除浮子

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>

上一篇 : ：点击android通知图标不会触发广播接收器下一篇 : 如何更改窗口的位置而不重新加载和＃黑客？

使用html&在窗口处截取的页面机身显示:隐藏

相关阅读

推荐文章