I would like to create a scrollable content div (#left) while keeping all other elements (#header, #right) in place. If I give #left a fixed height it behaves as desired, but I want it to fill up the whole viewport and don't know any heights beforehand.
html, body{
height:100%;
margin:0;
padding:0;
}
#main {
display: flex;
height: 100%;
flex-direction: column;
}
#header {
background-color: blue;
}
#content {
flex: 1;
background-color: red;
}
#inner {
display: flex;
height: 100%;
background-color: yellow;
}
#left {
flex: 1;
height: 100%;
overflow: auto;
background-color: pink;
}
#right {
flex: 1;
height: 100%;
background-color: green;
}
<div id="main">
<div id="header">
Heyheyhey<br/>
Yo<br/>
</div>
<div id="content">
<div id="inner">
<div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
Thanks!
Just use flex properties all the way through.
You don't need display: block.
You don't need calc().
You don't even need percentage heights.
#main {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
background-color: aqua;
}
#content {
flex: 1;
background-color: red;
display: flex;
min-height: 0; /* for Firefox and Edge; see note below */
}
#inner {
display: flex;
background-color: yellow;
}
#left {
flex: 1;
overflow: auto;
background-color: pink;
}
#right {
flex: 1;
background-color: lightgreen;
}
body {
margin: 0;
}
<div id="main">
<div id="header">
Heyheyhey<br/> Yo
<br/>
</div>
<div id="content">
<div id="inner">
<div id="left">
Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
Note: For this layout to adhere to the flexbox specification, and work in Firefox and Edge, you need to override the min-height: auto default on flex items. Chrome provides a built-in override. A full explanation is here: Why don't flex items shrink past content size?
I believe below approach solves your issue. Pure CSS. display: flex in display: block.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
display: flex;
height: 100%;
flex-direction: column;
}
#header {
background-color: blue;
}
#content {
display: flex;
background-color: red;
overflow: hidden;
}
#inner {
display: block;
background-color: yellow;
}
#inner2 {
display: flex;
height: 100%;
}
#left {
width: 50%;
background-color: pink;
overflow: auto;
}
#right {
width: 50%;
background-color: green;
}
<div id="main">
<div id="header">
Heyheyhey<br/> Yo
<br/>
</div>
<div id="content">
<div id="inner">
<div id="inner2">
<div id="left">
Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
</div>
Related
I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe
Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned
Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result
"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}
Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.
The problem: The main-container shows a scrollbar when the content-container overflows. Also the width and height of the content-container can't be hardcoded because it should expand with the remaining space of the main-container.
Expectation: Only the content-container shows the scrollbar when the contents overflows and the width and height of main-container doesn't change.
The below code snippet is what I have tried
.main-container {
background: #364f6b;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.sidebar {
min-width: 80px;
width: 80px;
height: 100%;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel, volutpat et lectus. Morbi
blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc feugiat suscipit nibh eu cursus.
Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis vestibulum vitae massa. Vestibulum
nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla facilisi. Nunc sit amet finibus nibh.
Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo. Aenean accumsan massa sed auctor elementum.
Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie ornare. Nam ut gravida augue, non posuere
lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat elit, nec dictum lorem orci at nulla. Vestibulum
bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque mi, sit amet euismod felis sem et nisi. Sed sodales,
ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
This is what I want to achieve
You are almost there - instead of using width and height, just use flex-grow and then for your scroll bar, you can absolutely position a div inside the content container to make it have a height of 100%
body,
html {
height: 100%;
margin: 0;
}
.main-container {
background: #364f6b;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
flex-grow: 1;
display: flex;
flex-direction: row;
}
.sidebar {
min-width: 80px;
width: 80px;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
flex-grow: 1;
position: relative;
}
.overflow-container {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<div class="overflow-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi
ante, egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris
eleifend nisi ante, egestas vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel,
volutpat et lectus. Morbi blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc
feugiat suscipit nibh eu cursus. Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis
vestibulum vitae massa. Vestibulum nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla
facilisi. Nunc sit amet finibus nibh. Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo.
Aenean accumsan massa sed auctor elementum. Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie
ornare. Nam ut gravida augue, non posuere lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat
elit, nec dictum lorem orci at nulla. Vestibulum bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque
mi, sit amet euismod felis sem et nisi. Sed sodales, ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
</div>
Alternative way to make the layout
The solution given by #pete works perfectly for what I asked using flexbox.
Another way to make the layout is by using grids. With grid I was able to get rid of extra container divs.
Below code snippet uses grid for the layout. The first column of the grid is set to auto so that I can animate the sidebar. If we hover on the sidebar the grid automatically adjusts with the width of the sidebar.
body {
margin: 0;
height: 100vh;
width: 100vw
}
#root {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 29px auto 1fr;
grid-template-columns: auto 1fr 300px;
grid-template-areas:
"topbar topbar topbar"
"sidebar tabbar tabbar"
"sidebar content content";
}
#topbar {
grid-area: topbar;
background: #ba53de;
}
#sidebar {
width: 80px;
grid-area: sidebar;
background: #f469a9;
transition: 100ms ease;
}
#sidebar:hover {
width: 150px;
}
#tabbar {
height: 25px;
grid-area: tabbar;
background: #f4fa9c;
}
#content {
grid-area: content;
background: #88bef5;
height: 100%;
width: 100%;
overflow: auto;
}
.story{ padding: 10px; }
<div id="root">
<div id="topbar"></div>
<div id="sidebar"></div>
<div id="tabbar"></div>
<div id="content">
<div class="story">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin tincidunt ex ut rutrum. Ut quis sagittis odio. Integer magna orci, facilisis a porttitor sed, gravida vel tortor. Nulla scelerisque faucibus vehicula. Donec in libero dignissim,
placerat velit a, pretium ante. Donec sed eros orci. Praesent quis neque at mauris facilisis eleifend eget elementum sem. Nam pulvinar mauris odio, sit amet scelerisque mauris porta non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Maecenas eget tristique lectus. Quisque sed quam felis. Vestibulum sit amet semper dui. Mauris sit amet consectetur nibh. Sed cursus viverra elit quis accumsan. Proin pharetra lorem nec nisl tempus pretium. Cras vel suscipit
odio, in mattis sem. Vivamus finibus odio eu nisl egestas tristique. Mauris posuere gravida pulvinar. Suspendisse a lacus purus. Morbi imperdiet arcu et aliquet cursus. Ut condimentum magna at eleifend vehicula. Nullam interdum fermentum lectus.
Ut vitae molestie dolor. Etiam mollis ut purus vitae tempor. Mauris aliquet ex sit amet vestibulum ultrices. Quisque id leo nec mauris feugiat volutpat non ac diam. Praesent ac eros sed lorem tempor commodo. Donec quam urna, congue nec metus vitae,
vulputate semper ligula. Nunc eleifend pharetra dolor, eget congue nisl mattis non. Integer ultrices ex in dapibus pharetra. Nullam viverra non eros in congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu ante malesuada,
pharetra est eget, placerat neque. Quisque et leo cursus, fringilla velit in, posuere nulla. Donec tincidunt augue et arcu lobortis volutpat. Phasellus eu vulputate est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc diam eros,
consectetur id urna id, ullamcorper semper ipsum. Quisque diam mi, condimentum at gravida at, fermentum a velit. Aenean a turpis nec eros imperdiet luctus eget eget erat. Aenean non viverra nisi. Aliquam ligula erat, eleifend vel lacus varius, tincidunt
tristique turpis. Aenean suscipit risus sed diam euismod, sit amet gravida tortor condimentum. Morbi auctor luctus quam, quis vestibulum leo auctor a. Sed convallis, tellus eget lacinia fringilla, massa justo consequat ante, sed aliquam enim felis
ac est. Fusce rutrum ipsum quis imperdiet gravida. Vestibulum facilisis vel est in ultrices. Maecenas rhoncus nisl vitae consectetur pulvinar. Praesent imperdiet, lorem sed dapibus bibendum, velit tortor molestie elit, et ornare mi nisl ut lacus.
Morbi quis vestibulum elit. Donec sed aliquam purus, vitae porta enim. Vivamus finibus dui sed faucibus eleifend. Praesent ac ligula arcu. Aliquam et cursus quam. Aliquam tempor neque leo, ac tincidunt ipsum gravida sit amet. Phasellus ac turpis
sit amet ex gravida auctor. Donec non imperdiet nisl. Donec facilisis mi at diam euismod, eu finibus lacus tincidunt. In cursus scelerisque urna molestie ullamcorper. Sed varius ornare lectus, nec ultricies leo facilisis non. Nulla facilisi. In
hac habitasse platea dictumst. Proin et leo dignissim, tristique libero vitae, lacinia metus. In pulvinar metus vitae arcu consectetur, facilisis pellentesque sem consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus quis volutpat justo. Praesent ipsum orci, blandit id dignissim in, mattis eget felis. Aenean rutrum est urna, ut laoreet nisi scelerisque quis. Nam augue risus, fermentum venenatis lectus a, malesuada condimentum odio.
</div>
</div>
</div>
Context
I'm making a website that allows to create csgo bind/config files, so I splited the page in half : on the left, inputs from user, on the right, the configuration result.
I have one button, at the end of the each panel, to compute inputs and to download the file, but I would like to keep them visible all time (currently, they are at the bottom of the page, i need to scroll to find them).
For one panel, we have :
As the title and the button have "known" position, is there a way to extend the lorem ipsum div, pushing the button to the bottom of the panel, without overflowing the screen ?
I don't want to use absolute attributes, in anticipation of an adaptation for smaller screens (at that time, the two panels will be located one below the other).
I have try some stuff with flex-grow, nothing convincing.
I don't have any defined height for the lorem ipsum div; I want to cover the maximum of the panel, without overflowing it.
Here is some simplified code :
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
Make each of you panel elements a column flexbox with height: 100% (also consider border-box to including padding in height).
Now just add min-height: 0 to wrapper element - see demo below:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
min-height: 0; /* added */
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
display: flex; /* added */
height: 100%; /* added */
flex-direction: column; /* added */
box-sizing: border-box; /* added */
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - you can see some examples of this:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Added the following CSS to your lorem id:
#lorem {
height: 80%;
overflow-y: auto;
}
Also to your panel: max-height: 100%;
Key part here is overflow-y: scroll. This works as long as you have a height defined. Since you want the content of your lorem to be relative to your panel, you can use a % height, in this case 80% seems to fit nicely between your title and button.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#lorem {
height: 80%;
overflow-y: scroll;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
max-height: 100%;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
</body>
</html>
When using flexbox, it's important that you specify exactly what you want for each element. You've said you don't want a height on #lorem but you have to specify a height somewhere in order to get the results you want, I specified it with h1 and #wrapper. I believe this is the result you're looking for, take a look at the fiddle.
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
h1 {
height: 20%;
}
#lorem {
overflow-y: scroll;
}
#wrapper {
height: 80%;
display: flex;
flex-direction: row;
}
.panel {
padding: 1em;
width: 50%;
display: flex;
flex-direction: column;
}
You can make use of jquery to identify the dynamic height of the panel.
function resizeElement(id){
var win= window.outerHeight;
var title= $("#title").outerHeight();
var extraPadding= 32;
var height= win- (title+extraPadding);
$("#lorem").css("max-height", height+ "px");
}
resizeElement('left');
resizeElement('right');
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
max-height: 50%;
overflow-y: auto;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="footer">
<input type="button" value="Press Me 1">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div id="footer">
<input type="button" value="Press Me 2">
</div>
</div>
</div>
</body>
</html>
I can't figure out what's blocking here, or if it's just not possible. I wanted to put together what seemed like a simple design, right aligned sidebar with the content of the sidebar aligned in the bottom, the main content flowing freely but not going underneath the sidebar, yet I can't get it right. This is as close as I can get it, but I can't get the background to run along the whole height.
.main_box {
width: calc(100% - 300px);
float:left;
background-color: green;
}
.side_panel {
float: right;
height: 100%;
background-color: blue;
}
.bottom_nav {
background-color: red;
width: 300px;
position: fixed;
right: 0;
bottom: 0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus, enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla. Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
when using a position:fixed the element you will get removed from the normal flow making its parent element empty like it doesn't exist.
Consider the parent element to be fixed then place the content inside at the bottom:
.main_box {
width: calc(100% - 300px);
float: left;
background-color: green;
}
.side_panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
background-color: blue;
}
.bottom_nav {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width:100%;
}
body {
margin:0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae
metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus,
enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla.
Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit
nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit
arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
I’m trying to enable the overflow: scroll property as the content keeps overflowing, but the scroll bar doesn’t work at all. How to fix this? Is there any other way to make sure the content can be seen on the screen?
#pageback {
background-color: #00003D;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#pagewrap {
overflow: scroll;
padding: 10px;
background-color: #000099;
width: 87.5%;
height: auto;
margin: 0 auto;
overflow: scroll;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
<div id="pageback">
<h1>PageBackground</h1>
<div id="pagewrap">
<h2>Pagewrap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, iaculis vitae dolor eget, fermentum convallis mauris. Nulla justo nunc, porttitor vitae posuere vel, vulputate at tortor. Maecenas ut bibendum tortor. Donec convallis, purus nec vulputate tempor, tortor lorem condimentum tellus, nec luctus leo lectus id mauris. Praesent convallis non tortor vel mattis. Curabitur sodales semper nulla. Fusce posuere tristique dui, id sodales enim malesuada id. Donec auctor ipsum nec pulvinar tincidunt. Donec sit amet leo vitae dui semper scelerisque. Praesent eleifend sit amet orci eget consectetur.</p>
<p>Quisque ac felis nulla. Morbi nec lacus iaculis, pulvinar sem non, venenatis urna. Pellentesque molestie urna eu sem pellentesque, vitae sollicitudin ipsum aliquam. Morbi finibus, urna ut venenatis feugiat, risus nisi fringilla libero, quis rhoncus libero lacus quis nisl. Morbi sagittis viverra sapien at eleifend. Nam et mattis nibh. Phasellus lobortis posuere rutrum. Morbi at accumsan urna. Donec vehicula a sapien eu pretium. In scelerisque ut mi ac mollis. Aliquam bibendum sem justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac enim erat.</p>
<p>Fusce sit amet accumsan neque, cursus sagittis dolor. Vestibulum venenatis sapien sem, mollis sagittis neque pharetra sit amet. Morbi hendrerit arcu purus, et auctor ex porttitor at. Morbi ut pellentesque arcu. Integer efficitur tortor non eros posuere ultricies. Sed sollicitudin imperdiet libero id euismod. Morbi lobortis feugiat diam, in dignissim purus congue vel. Donec consectetur, leo quis imperdiet maximus, dui arcu gravida lectus, quis vehicula ipsum ipsum vitae mauris. Vivamus magna ante, dapibus ut tincidunt ut, tempor a felis. Pellentesque elit velit, venenatis eget lobortis pretium, pulvinar eu magna.</p>
<p>Pellentesque pretium rutrum lobortis. Aliquam odio arcu, elementum eu turpis sit amet, rutrum ultrices sem. Maecenas eget efficitur dolor, vitae suscipit turpis. Nulla facilisi. Vivamus pellentesque velit sit amet nisl tincidunt, sit amet gravida est maximus. Fusce diam eros, tincidunt quis lacus quis, placerat luctus enim. Cras et ultrices est, eget gravida turpis. Curabitur tempus diam nec volutpat bibendum. In finibus arcu ut purus congue ultricies. Duis laoreet enim metus, sed malesuada odio scelerisque in. Donec pulvinar gravida finibus. Nunc eget lacus at lorem aliquet tristique a blandit orci.</p>
<p>Praesent a lacinia dolor. Pellentesque sagittis fermentum tincidunt. Vivamus volutpat tincidunt nulla non commodo. Donec non mi ultrices, aliquet nibh at, varius lectus. Ut malesuada feugiat arcu at rutrum. Nam rhoncus leo efficitur sodales blandit. Pellentesque laoreet nulla nec nunc volutpat commodo nec vitae ipsum. Quisque nec commodo magna. Morbi ut blandit urna. Integer eros quam, porta dapibus porttitor vitae, mollis et diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac ornare tellus. Aenean commodo vitae turpis et tincidunt. In felis lectus, tristique in volutpat non, tristique non metus. Vivamus quis turpis mattis, venenatis nisl nec, varius nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, iaculis vitae dolor eget, fermentum convallis mauris. Nulla justo nunc, porttitor vitae posuere vel, vulputate at tortor. Maecenas ut bibendum tortor. Donec convallis, purus nec vulputate tempor, tortor lorem condimentum tellus, nec luctus leo lectus id mauris. Praesent convallis non tortor vel mattis. Curabitur sodales semper nulla. Fusce posuere tristique dui, id sodales enim malesuada id. Donec auctor ipsum nec pulvinar tincidunt. Donec sit amet leo vitae dui semper scelerisque. Praesent eleifend sit amet orci eget consectetur.</p>
<p>Quisque ac felis nulla. Morbi nec lacus iaculis, pulvinar sem non, venenatis urna. Pellentesque molestie urna eu sem pellentesque, vitae sollicitudin ipsum aliquam. Morbi finibus, urna ut venenatis feugiat, risus nisi fringilla libero, quis rhoncus libero lacus quis nisl. Morbi sagittis viverra sapien at eleifend. Nam et mattis nibh. Phasellus lobortis posuere rutrum. Morbi at accumsan urna. Donec vehicula a sapien eu pretium. In scelerisque ut mi ac mollis. Aliquam bibendum sem justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac enim erat.</p>
<p>Fusce sit amet accumsan neque, cursus sagittis dolor. Vestibulum venenatis sapien sem, mollis sagittis neque pharetra sit amet. Morbi hendrerit arcu purus, et auctor ex porttitor at. Morbi ut pellentesque arcu. Integer efficitur tortor non eros posuere ultricies. Sed sollicitudin imperdiet libero id euismod. Morbi lobortis feugiat diam, in dignissim purus congue vel. Donec consectetur, leo quis imperdiet maximus, dui arcu gravida lectus, quis vehicula ipsum ipsum vitae mauris. Vivamus magna ante, dapibus ut tincidunt ut, tempor a felis. Pellentesque elit velit, venenatis eget lobortis pretium, pulvinar eu magna.</p>
<p>Pellentesque pretium rutrum lobortis. Aliquam odio arcu, elementum eu turpis sit amet, rutrum ultrices sem. Maecenas eget efficitur dolor, vitae suscipit turpis. Nulla facilisi. Vivamus pellentesque velit sit amet nisl tincidunt, sit amet gravida est maximus. Fusce diam eros, tincidunt quis lacus quis, placerat luctus enim. Cras et ultrices est, eget gravida turpis. Curabitur tempus diam nec volutpat bibendum. In finibus arcu ut purus congue ultricies. Duis laoreet enim metus, sed malesuada odio scelerisque in. Donec pulvinar gravida finibus. Nunc eget lacus at lorem aliquet tristique a blandit orci.</p>
<p>Praesent a lacinia dolor. Pellentesque sagittis fermentum tincidunt. Vivamus volutpat tincidunt nulla non commodo. Donec non mi ultrices, aliquet nibh at, varius lectus. Ut malesuada feugiat arcu at rutrum. Nam rhoncus leo efficitur sodales blandit. Pellentesque laoreet nulla nec nunc volutpat commodo nec vitae ipsum. Quisque nec commodo magna. Morbi ut blandit urna. Integer eros quam, porta dapibus porttitor vitae, mollis et diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ac ornare tellus. Aenean commodo vitae turpis et tincidunt. In felis lectus, tristique in volutpat non, tristique non metus. Vivamus quis turpis mattis, venenatis nisl nec, varius nisi.</p>
</div>
</div>
Codepen
CSS
#pageback {
background-color: #00003D;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: 100%; /* changed */
position: fixed;
top: 0;
left: 0;
}
#pagewrap {
overflow: scroll;
padding: 10px;
background-color: #000099;
width: 87.5%;
height: inherit; /* changed */
margin: 0 auto;
overflow: scroll;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
DEMO