CSS - 在html&机身显示：隐藏 [英] CSS - Page to cut off at window with html & body display: hidden
问题描述
*注意：根据 @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.
p>在我上面的例子中，我使用 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如果我似乎对未修订的问题提出另一个问题，我不是。这仍然是同样的问题，刚才我已经完全提供了所有的元素。
P.S. If it seems that I am asking a separate question to the un-revised question, I am not. This is still the same problem, just now I have fully provided all elements to it. Tku.
推荐答案
您可以使用 flexbox ：
-
高度：100％
包装窗口 into a 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>
更新的答案：
将窗口包含在具有如下样式的div中：
Remove the floats
Wrap the window with a div with styles like this:
包装侧栏和内容的容器应包含 flex：1 ，且不应具有 height：100％。所以添加了这种风格：
.window-wrapper {
overflow-x: hidden;
overflow-y: auto;
flex: 1;
}
.window {
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:
已移除 height：100％
.container-inner {
display: flex;
margin: 0;
flex: 1;
}
要完成操作，请添加<$ c $
Removed height: 100% from the side too.
To finish things up, added box-sizing: border-box to all elements to prevent the overflows.
p>
* {
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>
这篇关于CSS - 在html&机身显示：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
