Page to cut off at window with html & body display: hidden - html

Question

*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.
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>
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).
Here's the jsfiddle as well.
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.
In my example above I use html, body { height: 100%; } I have also tried height: 100vh; but that did not work.
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.

Answer 1

You can do this using a flexbox:
First put height: 100% on the body and remove the default margins.
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>
Updated answer:
Remove the floats
Wrap the window with a div with styles like this:
.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:
.container-inner {
display: flex;
margin: 0;
flex: 1;
}
Removed height: 100% from the side too.
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>

Answer 2

A small modificaton required in your div
html,
body {
overflow: hidden;
}
.window {
margin: 64px;
overflow-y: auto;
height: 100px;
}
.big {
height: 32px;
background-color: #369;
}
.small {
height: 16px;
background-color: #a12;
}
<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>