I have a simple page in which I want a sticky header and a sticky sidebar. Here is a fiddle and here is the same code:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
The sticky header works fine.
The sticky sidebar does not work. The sidebar is in a containing element that sets the CSS grid, and is centered with a max-width. I have read that sticky sticks to its nearest scrolling ancestor, so I assume this is not working because the body is scrolling and not the container div, but I'm not sure what to do about this.
If I do something like height: 100px on the container div I end up with a scrollbar on that div rather than the body. I want the scroll on the body.
If I used a fixed position on the sidebar, the grid breaks (the content div now spans 100% of the container) and I would have to know the height of the top sticky bar in order to set the offset on the scrollbar. If the height of the top bar varies this won't work.
What is the solution to this?
You can add align-self: flex-start to override the default stretch behaviour of sidebar( because it is a grid item)
Now you can explicitly set 100vh height to the sidebar - see demo below without grid-gap and / or margin or padding
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
/*grid-gap: 50px;*/
grid-template-columns: max-content 1fr;
/* margin-top: 50px;*/
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: 100vh; /* set a fixed height */
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
Adding back the grid-gap, margin and padding - you can adjust the explicit height set on the sidebar - see demo below:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: calc(100vh - 30px); /* set a fixed height */
padding-top: 20px;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
Related
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</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 dynamically generated HTML page that has to be saved as pdf. The page has border that has to appear on the edge of the page thus in the #media print, I have set the #page size as A4 and margins as 0. The problem is that the content will get overwritten on the page border.
When I set the padding to the border, the top of the page first page gets properly printed but the content gets overwritten on the border at the bottom and in the remaining pages.
This can be clearly seen as shown in the images below.
Since I gave padding to the top border, the top of the first page is fine but not the bottom.
In this second page, the entire content gets inside the margin.
Here is the HTML for the same document.
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
#media print {
#page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}
<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
A combination between page-break-inside: avoid and padding/margin on paragraphs will do the trick.
This will look strange if there are very large paragraph around the page break, as this will make a big gap at the bottom of the page, so you should divide the text in smaller paragraphs.
/* I have removed your pageborder styles from answer to only include
the relevant styles for the sollution to the problem. */
#page{
size: A4;
margin: 0;
}
#innerContent {
/* This is the margin around the content */
margin: 50px;
}
h1, h2, h3, h4, h5, h6, p, .flow-control
/* Add any element types here that can occur as top element in the document flow
or just add class="flow-control" where needed */
{
page-break-inside: avoid; /* Make sure no page breake inside a paragraph */
padding-top: 50px; /* Creates a buffer to enlarge the area for page break.
This is also the visual padding for the firs paragraph on each page. */
margin-top: -50px; /* Cancel the top padding for all except the first paragraph on each page. */
}
h1, h2{
margin-top: -20px; /* Reduce the cancelling of top padding, so that
these elements actually will have some top padding */
}
p {
padding-bottom: 20px; /* This is the margin between paragraphs and also
works as buffer size at bottom of the page */
}
<body>
<div class="pageborder" id="pageborder1"></div>
<div class="pageborder" id="pageborder2"></div>
<div class="pageborder" id="pageborder3"></div>
<article id='innerContent'>
<h1>Lorem Ipsum</h1>
<section>
<blockquote cite="https://la.wikisource.org/wiki/De_finibus_bonorum_et_malorum/Liber_Primus">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote >
<blockquote cite="https://www.quora.com/What-is-the-origin-of-lorem-ipsum-text">
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</blockquote >
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, justo quis elementum elementum, dui dolor accumsan ligula, vitae condimentum est magna a dui. Praesent accumsan mi eget augue cursus, vel maximus ante cursus. Nullam luctus massa gravida ipsum luctus dignissim. In eget turpis ut sapien consequat euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac porttitor nisl. Fusce ac sapien eget lacus gravida pharetra non id risus. Donec luctus finibus commodo. Cras convallis in nunc a venenatis. Curabitur at nisi nec nisl semper sagittis sed vel sem.</p>
<p>Sed dictum massa quam, nec bibendum neque egestas non. Ut mattis lacus nisi, gravida hendrerit erat scelerisque sit amet. Nulla eget leo venenatis eros rhoncus bibendum et at quam. Morbi ac leo convallis, maximus velit et, porttitor justo. Aliquam erat volutpat. Donec aliquam ultricies nunc, vitae dapibus sapien sollicitudin non. Pellentesque ac diam ut odio posuere efficitur non finibus ante. Vivamus aliquam leo a suscipit finibus. Mauris a ex metus. Phasellus luctus augue sit amet ipsum venenatis, at imperdiet nunc sollicitudin. Cras iaculis lorem ac justo posuere, sed venenatis nibh fringilla.</p>
<p>Duis imperdiet euismod sem, id dignissim erat gravida vel. Duis nec nibh lectus. Donec in rhoncus sapien. Nulla nisi nisl, gravida at vulputate at, ornare id tortor. Nulla varius ligula ac turpis porta, non tristique leo efficitur. Quisque suscipit, est ut aliquam interdum, mi nulla pharetra metus, imperdiet imperdiet ex sapien sed metus. Integer sit amet lectus ut justo tincidunt laoreet sit amet ac ipsum.</p>
<p>Donec mollis tempus cursus. Mauris et tincidunt ante. Nam leo ex, volutpat non velit ac, imperdiet luctus tellus. Vestibulum vitae consectetur mauris, eu imperdiet dolor. Vestibulum viverra mi id diam viverra, at convallis ex bibendum. Nam mollis feugiat pulvinar. Maecenas neque ipsum, consequat a iaculis at, semper in ipsum. Vivamus a porta sapien. Fusce pulvinar, nulla at euismod semper, ipsum arcu vestibulum orci, sed egestas lectus odio et mi. Sed venenatis felis accumsan, consectetur orci sed, convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin mattis, orci ac rutrum lobortis, odio tellus euismod mi, et scelerisque tellus massa ut risus.</p>
<p>Aenean in elit vitae risus pharetra suscipit eu sed risus. Maecenas sollicitudin nunc ac lacus fermentum tincidunt. Maecenas a pretium ipsum. In viverra eros sit amet lectus eleifend, at auctor velit mollis. Proin aliquam risus vel arcu pellentesque, eget volutpat justo facilisis. Nunc in ex tellus. Mauris euismod luctus commodo. Pellentesque arcu justo, aliquam ut quam in, egestas dapibus ante. Morbi facilisis mi nec leo semper laoreet. Aenean ac dolor vel erat suscipit vulputate. Praesent sit amet eleifend libero, sit amet viverra lorem. Ut eleifend lectus non tempus placerat. Praesent magna ipsum, porta sit amet mattis vel, condimentum eleifend magna.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas velit tortor, faucibus vitae rhoncus eget, laoreet vel sem. Proin interdum ut risus a tempor. Aliquam malesuada, tellus et luctus iaculis, est est aliquet nisl, volutpat elementum augue nunc ut lorem. Nulla facilisis ipsum vestibulum, iaculis magna in, maximus libero. Suspendisse tortor odio, euismod nec leo placerat, mattis varius elit. Suspendisse a ipsum vehicula, viverra metus eget, scelerisque dui. Suspendisse potenti. Vivamus a sapien eget felis mollis imperdiet.</p>
<p>Sed accumsan eu dolor nec vestibulum. Aenean interdum porttitor mattis. Curabitur finibus, erat nec posuere luctus, elit nisi imperdiet neque, eget maximus nulla dolor at justo. In sem odio, feugiat quis condimentum id, sodales id felis. Nulla facilisi. Vestibulum odio ex, blandit vel ullamcorper ac, tincidunt et justo. Vestibulum congue congue vehicula. Praesent tempor tortor ut tellus vulputate hendrerit. Proin lectus ante, dapibus eu laoreet varius, dictum sit amet lacus.</p>
<p>Integer vel mollis justo, quis commodo diam. Morbi cursus mauris nibh. Proin vestibulum ornare turpis, in consequat tellus condimentum quis. Praesent nulla magna, commodo sit amet molestie a, sollicitudin laoreet elit. Fusce ut augue vitae ligula commodo mattis sit amet non augue. Nulla a lectus purus. Sed sed consequat magna, in tempus quam. Cras sed consectetur nulla, tempus luctus ligula. Proin porttitor porttitor nisl, quis pretium turpis imperdiet id. Fusce commodo nulla sem, vitae gravida nulla molestie eu. Donec accumsan ex eget faucibus luctus. Ut leo eros, accumsan id aliquam et, aliquet at tellus.</p>
<p>Proin fringilla congue metus, ac semper ex aliquam ullamcorper. Integer porttitor tempor leo ac elementum. Vivamus a nisi vitae tellus interdum rhoncus. Nam eleifend ipsum sit amet enim feugiat, vitae pulvinar elit dignissim. </p>
<p>Vivamus tempus felis enim, non fermentum erat venenatis a. Morbi dolor ante, iaculis in nulla sit amet, eleifend aliquam nisl. Phasellus ultrices turpis ut ipsum molestie, a euismod sem venenatis. Duis a leo ac quam gravida sagittis nec vitae dui. Proin pellentesque, nulla sed fringilla malesuada, dui erat dignissim ex, eget sollicitudin enim purus pellentesque risus. Aenean a porta lacus, nec ullamcorper tellus.</p>
<div class="flow-control"><!-- This is to make sure there are no page brake
between the header and next paragraph -->
<h2>Header test</h2>
<p>Curabitur eros metus, maximus ornare mollis suscipit, commodo sed erat. Suspendisse dolor lectus, suscipit auctor risus a, malesuada auctor magna. Cras erat augue, venenatis luctus erat ac, ultrices pretium tellus. Mauris faucibus convallis euismod. Mauris tincidunt sit amet metus quis mattis. Quisque luctus quam rutrum mollis mollis. Donec velit tortor, iaculis in mattis sed, consequat vitae ligula. Vestibulum tempus lacinia blandit. Integer eleifend lacus id lorem feugiat, at varius sapien accumsan. Nam fermentum hendrerit lorem, et euismod diam tincidunt sit amet. Donec vitae dolor in nunc eleifend tincidunt. Curabitur vel maximus purus. Donec varius lorem justo, a commodo dolor vehicula in. In condimentum risus sed placerat condimentum. Ut enim ex, pellentesque eget metus vel, gravida viverra arcu. Suspendisse interdum leo ac porta vestibulum.</p>
</div>
<p>Fusce ipsum justo, convallis et venenatis id, tincidunt non orci. Nam vestibulum molestie egestas. Vivamus ultricies ultrices fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet dui porta, tempor nibh finibus, suscipit felis. Aenean rhoncus enim at imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus eros, euismod sit amet gravida sit amet, mattis ut tortor. Fusce nec lectus a massa iaculis tempor. Morbi tortor ante, facilisis eget diam suscipit, dignissim pulvinar nulla. Nunc ultrices eros sed facilisis mattis.</p>
<p>Vestibulum lobortis metus velit, id cursus justo viverra id. Sed euismod nisi nunc, id malesuada nulla porttitor ultricies. Quisque cursus ut nisl eu vehicula. Ut a convallis nulla. Maecenas vehicula dolor a dui mattis, non sollicitudin lorem malesuada. Sed faucibus vulputate turpis in fringilla. Donec feugiat dui at nulla iaculis rhoncus. Mauris venenatis congue maximus. Vivamus maximus volutpat dictum. Cras vehicula sodales ante ut viverra.</p>
<p>Vivamus at rutrum justo. Vestibulum vulputate scelerisque convallis. Etiam vulputate nunc tempor tortor varius lobortis. Suspendisse ut posuere augue. Proin nunc metus, fermentum at tincidunt in, gravida ut massa. Curabitur eu ex tristique, accumsan justo in, luctus dui. Praesent a dolor eu tellus gravida lobortis sed ut magna. Nunc feugiat elit ultricies, bibendum lacus nec, cursus elit. Proin facilisis mauris a dolor imperdiet, vel lacinia enim rutrum. Sed tristique ultricies magna ac lobortis. Integer nec varius sapien. Vestibulum convallis finibus enim, sed tincidunt lectus scelerisque quis.</p>
<p>Nam faucibus lorem et ultrices luctus. Aliquam id pharetra nisi. Curabitur malesuada elit eget nisi imperdiet fringilla. Quisque orci eros, pulvinar eget finibus ut, mollis vitae magna. Nulla molestie massa at convallis facilisis. Maecenas sagittis facilisis feugiat. Quisque rutrum, urna at consectetur pellentesque, mauris dolor faucibus nisl, vel tristique leo est vitae magna. Curabitur fermentum dignissim nisi tincidunt rhoncus.</p>
<p>Suspendisse pretium enim volutpat, fringilla urna tempor, dictum metus. Nunc vel purus vel arcu molestie hendrerit. Vestibulum sed mollis mauris. Fusce nisi velit, imperdiet sed porttitor at, elementum at mauris. Quisque at magna volutpat, rhoncus velit volutpat, aliquet dolor. Ut metus ante, commodo non risus sed, congue posuere metus. Mauris a sem metus. Duis accumsan mi non facilisis mollis. Maecenas et dolor eget felis rhoncus pretium. Aenean vitae arcu cursus, ultricies massa vel, congue leo. Proin suscipit nisi odio, malesuada interdum nisi aliquam at. Aliquam ac congue magna.</p>
</article>
</body>
Add these lines of code in your CSS, it will work :)
#pageborder2:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
position: fixed;
margin-left: 15px;
top: 10px;
border-radius: 10px;
}
#pageborder3:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
border-radius: 10px;
position: fixed;
bottom: 10px;
}
I'm trying to create a simple modal (popup) window, with the fewer lines of code posible... as basic as possible.
The modal's maximum width is 650px and the height should fit the content. If the content overflows, then the scrollbar takes over.
The following code works perfectly on Chrome. But on Firefox and IE Edge, the modal NEVER fits the content window... it is always 100% height. Why?
HTML
<a href="#" data-modal>open modal here</a>
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at. Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.modal {
display: none;
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
height: fit-content;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
https://jsfiddle.net/97khd8ad/18/
The fit-content keyword is experimental and is not currently supported outside of Chrome (https://developer.mozilla.org/en-US/docs/Web/CSS/height) but you can achieve the same effect by positioning the element at 50% from top and then offsetting it by half its height:
* {
box-sizing: border-box;
}
.modal {
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 50%; /* position half way from top */
transform: translateY(-50%); /* offset by half the element's height */
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at.
<!-- UNCOMMENT TO SEE THE OVERFLOW SCROLL WORKING
Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.--></p>
</div>
</div>
</div>
I am trying to make the following layout
-----------------------
|Header |
-----------------------
|A| B |
| | |
| | |
| | |
| | |
| | |
| | |
-----------------------
|Footer |
-----------------------
Where the following applies:
The header and footer stays in place with a fixed height, and full viewport width
A has remaining available height, width can be changed dynamically
B takes remaining available height and width. Reduces width when A is made wider and vice versa
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
I have tried a lot of table-row based positioning, and searched for similar qustions here on stackoverflow, but have not yet found any solution that works 100%.
Leaving the header and footer out of it, here is some CSS I have tried (B flows below A when making the browser window small, and the toolbar is 100% of the entire window - too high):
div#A {
display: inline-block;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#B {
display: inline-block;
max-width: 700px;
float: left;
overflow:scroll;
white-space: nowrap;
}
Another approach (better, but B still flows below A instead of getting scrollbars):
div#wrapper {
display: table-row;
height: 100%;
width: 100%;
}
div#A {
display: table-cell;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#content {
display: table-cell;
max-width: 600px;
float: left;
overflow:scroll;
}
Html
<header></header>
<main>
<div id="a"></div>
<div id="b"></div>
</main>
<footer></footer>
The header and footer stays in place with a fixed height, and full viewport width
//css
header, footer {
width: 5%; //fixed width that stay in place with a fixed height
}
A has remaining available height, width can be changed dynamically
//css
main {
width: 100%;
}
main #a {
float: left;
height: 100%;
width: 30%; //can be any width
}
B takes remaining available height and width. Reduces width when A is made wider and vice versa
/*#b will automatically take the rest of main!
because it has overflow:hidden */
#b {
overflow: hidden;
width: auto;
height: 100%;
}
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
Here i'm not sure what you want so the fiddle is lacking this part.
Do you want an ----> or
-|
-|
-|
-|
▼
Scrollbar? 1.
Replace overflow:hidden;
with overflow-x: scroll;
or overflow-y: scroll;
or overflow: auto for both ways
Fiddle for example :)
Try something like this:
<html>
<head>
<style>
#header
{
height:10%;
width:100%;
background-color:yellow;
}
#footer
{
height:10%,
width:100%;
background-color:red;
clear:left
}
#A
{
display:inline-block;
float:left;
height: 80%;
width: 5em;
background-color:green;
}
#B
{
display:inline-block
float:left;
height:80%;
background-color:blue;
overflow: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="A">A</div>
<div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec imperdiet ipsum, in dapibus nulla. Aenean iaculis lorem urna, at mattis metus ultricies ac. Aliquam sodales rhoncus metus, vitae fermentum ligula ornare nec. Nunc velit justo, ornare nec nulla eget, laoreet lobortis dui. Cras blandit odio dolor, a maximus nisl maximus a. Praesent nunc diam, euismod a iaculis vitae, mattis sed quam. Integer et luctus magna. Vivamus elementum arcu in leo suscipit, at aliquet arcu eleifend. Nunc tincidunt purus non orci feugiat tempor. In dapibus velit sapien, sed egestas erat lobortis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non efficitur erat. Nullam iaculis id tellus vel rutrum. Donec porta ultricies vestibulum. Phasellus congue enim ante, vitae posuere augue ornare vitae.
<br />
<br />Pellentesque dolor mi, ullamcorper non odio et, tincidunt rhoncus dolor. Maecenas cursus est nec sem varius fringilla. Praesent tempor sit amet est eget convallis. Nunc tempor tempus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sagittis sodales posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac lacinia felis. Fusce ultrices semper erat id imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis blandit orci. Vivamus pretium viverra ligula ac posuere. Vestibulum commodo, ante sed tempus lobortis, urna est porttitor dui, at dignissim massa nunc sed urna.
<br />
<br />Donec dictum lacus nec libero accumsan, auctor egestas metus sollicitudin. Nam pellentesque, ante quis lacinia tristique, sem dolor imperdiet mi, ornare consectetur tortor dui in mauris. Nulla facilisi. In sed dolor augue. Nulla ullamcorper felis vitae leo posuere posuere sit amet sed dui. Duis iaculis lorem porttitor risus iaculis congue. Mauris malesuada iaculis sapien vitae pulvinar. Nunc ut ipsum nibh. Aliquam vehicula quam eget malesuada lacinia. Curabitur eget magna ut erat pellentesque mattis sit amet eget ante. Cras et auctor felis. Nam justo diam, iaculis vel ligula sed, placerat lobortis lectus. Nulla dui enim, interdum eu posuere vel, sollicitudin non mauris.
<br />
<br />Morbi sit amet ultricies erat, vitae pharetra orci. Maecenas id lacus vestibulum, pellentesque ex eget, sollicitudin velit. Maecenas ultricies facilisis efficitur. Phasellus elementum tortor at ex convallis, in imperdiet nisi vulputate. Cras arcu tortor, faucibus et mattis vitae, aliquet vel ante. Nulla nec ipsum quis ex blandit elementum. In aliquam, elit ac aliquet faucibus, orci turpis tincidunt tortor, id suscipit erat urna at elit. Donec magna purus, vestibulum id erat vitae, iaculis sodales sapien.
<br />
<br />Quisque malesuada nunc vitae augue volutpat laoreet. Nulla egestas, nisi et fermentum congue, tortor neque finibus tellus, vel vulputate tellus tellus ut sapien. Integer fringilla posuere tellus ac mattis. Integer eget ultricies est. Aenean bibendum sapien vitae leo euismod vehicula. Curabitur venenatis ipsum quis porttitor facilisis. Morbi tincidunt condimentum urna, vitae pretium lorem pretium finibus. Vivamus volutpat erat nec tortor convallis mollis. Donec gravida orci ut elementum fringilla. Suspendisse fermentum, turpis id dapibus finibus, leo nulla suscipit sem, non aliquet ipsum est sit amet lacus. In hac habitasse platea dictumst. Aliquam pulvinar, erat in maximus maximus, eros velit blandit orci, id bibendum velit tortor non mi. Nulla risus tortor, semper sit amet nisi id, vestibulum efficitur augue. Ut quis ornare arcu, eu semper lectus.
<br />
<br />Nulla ut rhoncus orci. Duis et nulla commodo, mattis ligula imperdiet, aliquam arcu. Curabitur justo nulla, tristique sagittis convallis sed, convallis at purus. Donec urna nisi, ultrices a condimentum sed, ornare sit amet magna. Sed vel lacus eget lectus elementum efficitur nec vel velit. Sed sodales odio nec neque ornare, ac pulvinar eros tincidunt. Praesent interdum ac ligula non dictum. Vestibulum cursus hendrerit sollicitudin. Maecenas ultricies sapien viverra est aliquam, in pellentesque enim porta. Ut suscipit lorem at molestie malesuada. Aenean fermentum porta dolor, sed sagittis nisl tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut feugiat urna quam, a lacinia arcu placerat cursus. Integer lectus purus, eleifend et aliquam sed, consequat ac quam. Etiam et nisi enim. Quisque egestas pharetra erat et vehicula.
<br />
<br />Aenean convallis, purus at convallis vestibulum, nulla est pulvinar sem, ut varius dui elit et ligula. Donec porttitor rhoncus libero dignissim lacinia. Aenean eu nulla consectetur, mattis est ac, bibendum ante. Suspendisse vehicula nibh et mauris ornare, at finibus nulla aliquet. Aenean in scelerisque neque. Nulla quam lectus, consequat eu purus id, aliquam ultrices dui. Praesent et dolor pulvinar, imperdiet eros nec, lobortis justo. Mauris feugiat nulla a rhoncus aliquet. Cras ut imperdiet ante. Ut quis metus scelerisque, volutpat neque quis, pulvinar tortor. Nam placerat rhoncus lorem, non pharetra lectus auctor eget. Suspendisse in quam vitae augue blandit ultricies. Vivamus vulputate quam est, a pharetra erat porta eu. Quisque metus magna, porta eu euismod sed, porta sed erat. Aenean ornare, ante a scelerisque condimentum, ante velit aliquet arcu, vitae dictum nulla mi at massa. Quisque quis vestibulum velit, et placerat risus.
<br />
<br />Morbi cursus nibh eu ipsum mollis, non molestie leo auctor. Duis bibendum, neque eu tincidunt dignissim, nulla sem tincidunt metus, a lacinia risus libero eu nisl. Cras lobortis volutpat felis, in sollicitudin turpis tristique vel. Aliquam erat volutpat. Cras velit quam, tristique sit amet felis quis, consequat finibus nunc. Vivamus tempor nunc nec nibh mollis vulputate. Mauris pulvinar nibh ac eros fermentum luctus. Ut at orci ut est luctus pellentesque a quis nisl. Nunc posuere tellus ex, in porta felis vulputate vel. Donec rutrum faucibus risus. Donec sapien dui, porta quis volutpat eu, tincidunt eu quam. Sed eleifend pellentesque magna, vel tempus enim dictum tincidunt. Vestibulum nisl lorem, commodo vel ipsum quis, semper sodales leo.
<br />
<br />Vestibulum leo urna, sollicitudin eget ultricies at, scelerisque a lectus. Donec tellus sem, elementum et elit eget, lacinia posuere elit. In lacus ex, vehicula sit amet lacus et, dapibus molestie mauris. Donec ac justo metus. Sed eget faucibus dolor. Mauris sollicitudin vehicula augue, nec molestie est fringilla sed. Vivamus non neque arcu. Proin rhoncus justo in ex vehicula mollis. Nam at commodo neque. Sed consequat lacinia augue, ac iaculis enim cursus vitae. Aliquam varius augue ac condimentum vehicula. Vestibulum quis eros vitae elit maximus varius non eu ipsum. Nullam mollis urna nulla, et sagittis dolor mollis sit amet. Ut ut purus ac augue laoreet facilisis ac non lectus.
<br />
<br />Nulla tincidunt non diam nec posuere. Phasellus sodales bibendum magna iaculis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies magna ac metus mollis tincidunt. Aenean dignissim egestas odio, id vestibulum ex ultricies in. Aliquam faucibus arcu eu enim maximus, vel hendrerit ipsum aliquet. Vestibulum posuere urna a tortor dapibus malesuada. Curabitur feugiat magna id dolor fringilla, quis suscipit lacus pellentesque. Pellentesque tristique sem urna, ut luctus erat mollis ut. Vivamus eget ultrices est, nec facilisis nisl. Integer cursus auctor lorem ut imperdiet. Vestibulum finibus odio sit amet sapien pulvinar egestas. Nunc tincidunt mi sed ex faucibus dictum. In sed tempor libero. Donec tortor nulla, malesuada vel urna laoreet, commodo interdum velit.</div>
<div id="footer">Footer</div>
</body>
</html>
overflow: scroll gives you the scroll bar and white-space: nowrap takes away the word wrapping.