Related
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 have a strange problem with css pseudo elements. I tried to design an initial for my paragraph elements. I did this with the :first-of-type pseudo elment. It all woeked well. Then I wanted to add an info box to the right of the text. I used the pseudo element :before for it. When I did this, the initial changed it's height to the height of the before elment.
I set up an fiddle to show my code:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
div.project_content:before {
content: "";
float: right;
height: 200px;
width: 0;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
The problem is that the height in div.project_content:before affects both #facts and p.
If you want to offset the right-hand box and leave a gap in the text above it, instead use margin-top: 200px on #facts:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
margin-top: 200px;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
If instead you want the text to wrap around the #facts element, I'd recommend simply moving the #facts <div> to sit in the HTML structure where you want it to appear:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
<div class="project-vorsch">
<div class="project_content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales.
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
Hope this helps! :)
I have a problem with my html code I refer to the id class but it is not going to there, but to another rule. I think the problem have to do with the fixed header, but I can't find the solution for this. This is my html code:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
z-index: 2;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
Your spacer div appears to be sitting on top of your header. If you give your header a z-index the links work again:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
z-index:2;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
They are scrolling to the right place, the only problem is they are going under the Red Header, so you see the wrong one, You can rectify this by increasing the spacer's height depending on which link is clicked. Hope this helps.
Updated : The solution can be found here as "codepen.io/ukneeq/pen/zsKIH"
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