How do I crop the content of a column at the bottom of the scroll?
How to wrap with a light color #left
"Scrolling Content" at the bottom of the page when scrolling down? If there is no Scrollable Content in the left column, it should also be stretched to 100% of the page. I think the right column below the fixed container should follow the same rules as well.
.wrapper,
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
height: 100%;
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>
+3
source to share
2 answers
/* .wrapper, */ /* removed this */
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
min-height: 100%; /* changed here */
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>
+2
source to share
I removed redundant blocks and styles. Here's the minimal HTML and CSS:
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
display: flex;
flex: 1;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
flex-direction: column;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
top: 60px;
width: 60%;
height: calc(100vh - 60px);
}
<nav role='navigation'>
</nav>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
+1
source to share