用html＆amp ;;切断窗口的页面正文显示：隐藏

时间：2016-09-14 03:30:13

标签： html css

*注意：根据@aavrug和@kukkuz的答案，我重新构建了我的问题，以便完全传达我想要提出的问题。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

它似乎按计划运行（我之前遇到的是旧问题中的.main - .window - 正在页面下方扩展，因此您无法滚动整个页面长度）;但是，如果您查看结果页面的底部和右侧，您将看到应该存在的边框不在那里，这表明该页面实际上并未在底部切断窗口（在右侧，＆＃34;＆gt;＆＃34;我甚至消失在窗口的一侧）。

此处还有jsfiddle。

  

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

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

P.S。如果我似乎对未修订的问题提出单独的问题，我不是。这仍然是同样的问题，刚才我已经完全提供了所有元素。 TKU。

2 个答案:

答案 0 :(得分：3)

div中需要一个小修改

＆＃13;
＆＃13; 
html,
body {
  overflow: hidden;
}

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

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

.small {
  height: 16px;
  background-color: #a12;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您可以使用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%;
}

    3. 你去吧。请告诉我您对此的反馈。谢谢！

    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. 删除花车

    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. 也从height: 100%删除了side。

    5. 要完成任务，请在所有元素中添加box-sizing: border-box以防止溢出。

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

相关问题
最新问题