How can I move the scroll bar from the default right side of the screen to within a container/div? Using div style="height: 1000px; overflow-y: scroll;" i was able to create a new scroll bar for that container but there still is an outside default scroll bar that scrolls some of the div as well so each scroll bar basically scrolls half the screen. I only want the inner div to be what holds the scroll bar
Have you tried setting overflow to hidden on the outside container?
<div style="overflow: hidden;">
<ul style="height: 50px; overflow: auto;">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</div>
If an element has a scrollbar, it simply means the content is bigger than the element's height.
overflow: hidden simply hides the scrollbar but you won't be able to scroll and so any content past the element will be cut off.
Point is, if the outer box holds all the content, you can't just make a smaller box inside and let that do the scrolling.
You can't tell an element (e.g: <body>) to place its scrollbar into another element. Each element has its own scrollbars, which are independent of each other. So if you don't want scrollbars on body, you either:
forbid scrolling (bad): give it overflow-y: hidden. This has the disadvantage of making content unaccessible, by cutting off whatever doesn't fit the current height of the element
or make sure the sum of its children's sizes is not bigger than the available space (good). In your case, you have to limit the vertical size of the <body> (or a .container) to 100vh.
Here's an example, using display: grid:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header,
footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
max-width: 600px;
margin: 0 auto;
/* optional: */
min-height: 10rem;
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
border: solid #eee;
border-width: 0 1px;
}
.main .box {
margin-left: 15px;
}
<div class="container">
<header>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div class="main">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div class="box">
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>
So what's going on?
I placed three children in the container: <header>, .main and <footer>. Using grid-template-rows, I've instructed the grid to allow header and footer to take up whatever they need and give all the remaining space to .main.
This solution runs the risk that .main remains without enough height if header and footer sum up to the entire height.
To fix this problem, you might want to set a min-height on .main, but this will create the second scrollbar on narrow devices, which we want to avoid.
Another fix for this problem is to remove the height restriction of .container on those devices (thus moving the scrollbar back to .container). Example:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
padding-right: 15px;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
}
#media (max-width: 768px) {
.container {
height: auto;
}
header, footer {
padding-right: 0;
}
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div class="main">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div class="box">
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>
</div>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 10 months ago.
My aim is to have the height of the container limited to that of the image, with the overflow becoming scrollable on the y-axis.
I have tried grid-template-columns: repeat(2, minmax(0, min-content)) but to no avail.
Can some help me out? Such a small styling bug has been bugging me all day ;)
What i'm currently dealing with:
What i'm aiming for:
So, you want the height of the grid to be determined by the height of the image in the right column, not the height of the text in the left column? In that case, you need to remove the text from the flow by wrapping it in an element with position: absolute;. That way, its characteristics don’t affect the rest of the layout.
When you run this snippet, make sure you then click Full Page to see the effect properly.
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
I have a simple set up, with a sticky footer. It works fine in a jsbin sandbox, but in the template I am using one of the parent (inner-wrapper in the example) has overflow: hidden css property, what messes up the sticky footer. Is it a way to wrap the main-container with a div and override the inner-wrapper's overflow property? I have tried to add overflow: visible to the div undo-overflow.
Here is the desired result: https://jsbin.com/merikujosa/4/edit?html,css,output or just simple remove the .inner-wrapper's overflow property.
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.inner-wrapper{
overflow: hidden;
}
.undo-overflow {
overflow: visible;
}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa;
}
.main-content{
}
.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}
<div class="inner-wrapper">
<div class="undo-overflow">
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel condimentum nisl, vel rutrum arcu. Aliquam venenatis nulla ac mi ornare fermentum. Nunc sagittis lobortis turpis, elementum maximus libero pharetra in. Etiam quis nisi vel nisi gravida suscipit sed id eros. Sed nec metus eget arcu dictum interdum. Praesent quis sollicitudin nisl. Maecenas ex sapien, feugiat vitae lectus a, faucibus dignissim lectus. Curabitur eros erat, convallis et lorem vel, faucibus elementum mi. Fusce porttitor ligula id erat mattis gravida. Aenean pharetra a lacus eget volutpat. Proin scelerisque sagittis condimentum. Donec vitae ex nunc. Aliquam dignissim tempor mollis.
Aliquam nec pulvinar arcu, sed sollicitudin nibh. Suspendisse gravida porta elit, id commodo nulla aliquam at. Duis in est consequat, finibus diam vitae, vulputate mauris. Sed blandit tortor ipsum, sed luctus lectus elementum eget. Quisque vel placerat mi, vel lobortis libero. Duis malesuada fermentum dolor, id vehicula ligula imperdiet quis. Quisque ipsum odio, ornare quis tempus in, varius eget nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras egestas fringilla efficitur. Vestibulum vitae vestibulum sem. Nunc vel libero vel nunc vestibulum scelerisque at interdum metus. Aliquam leo nulla, varius in urna non, pellentesque blandit nisl. Nulla laoreet leo justo, nec scelerisque leo tempus id.
Nulla quis fringilla turpis. Nunc vitae justo est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc et justo vel erat porta gravida. Integer rutrum malesuada nulla, sit amet ultricies velit fermentum vel. Nulla at sapien in purus facilisis maximus. Quisque ultrices, elit in elementum iaculis, tellus diam tincidunt est, sed auctor magna ante et nulla. Praesent eu leo consectetur, blandit justo rhoncus, venenatis tellus. Vivamus viverra neque hendrerit ipsum interdum iaculis. Aenean vulputate nunc vel justo congue, et lacinia sapien tempor. Suspendisse non magna velit. Morbi tempus mi id ex varius placerat. Pellentesque eleifend venenatis ante non aliquam. Quisque vel aliquet eros. Curabitur sodales, tellus sit amet placerat dapibus, ligula felis facilisis est, eu scelerisque augue leo in massa.
Duis scelerisque imperdiet sem nec ornare. Maecenas varius, lorem non iaculis suscipit, lacus neque cursus lacus, vitae pretium dolor lectus eget nisl. Quisque finibus porta nibh in accumsan. Donec semper ante nec massa convallis vulputate. Sed blandit vel libero rutrum vestibulum. Aenean eget lacus nec arcu consequat hendrerit nec id velit. Aenean maximus ipsum vel euismod auctor. Aliquam enim libero, lobortis at convallis quis, malesuada eu dui. Nunc eget volutpat odio, sed hendrerit felis.
Quisque convallis aliquet bibendum. Mauris malesuada urna a interdum venenatis. Nunc auctor varius luctus. Vivamus ac ultricies sapien, in suscipit dui. Duis tristique velit ut posuere tincidunt. Cras non laoreet augue, eu bibendum elit. Quisque sed scelerisque lorem, at fringilla orci.
</div>
<footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>
</div>
</div>
I am currently trying to make a clean messaging system, and I have an issue with my interface. Note that I am making it with Materialize, but I can tweak it with custom CSS. I have a list of message on the left side, and the remaining space on the right displays the selected message. Those two items are side by side. Pretty classic.
But I have an issue when there are too many messages on the list, or when the text is too long to fit in the view height, I can't scroll.
I need the page to be non-scrollable, but I also need to be able to scroll the list and the message view.
To so, I tried to do something like that:
.message-view {
height: 40vh;
overflow-y: scroll;
}
It works, but it is not what I want. I want the .message-view div to take the entire remaining height. I could make tricky calculation based on previous elements heights, but I find it pretty annoying, and I am not sure I could get the exact height right on every device that way.
TLDR: I want a div that would be taking the remaining height dynamically to be scrollable using CSS or Materialize. Any idea?
Here is an example of my issue (on the left, the list is scrollable but height is garbage,
arbitrarily set to 80vh because it is approximately the height), and the message-view is not scrollable):
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.message-list-scroller {
width: 30%;
height: 80vh;
overflow-y: scroll;
}
.message-list {
width: 98%;
height: 100%;
border: 1px solid gray;
}
.message-list-item {
width: 100%;
border-bottom: 1px solid gray;
}
.message-view {
width: 70%;
height: 100%;
padding: 10px;
}
<html>
<body>
<h1>Message page</h1>
<div class="content">
<div class="message-list-scroller">
<div class="message-list">
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
</div>
</div>
<div class="message-view">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a metus vitae risus eleifend vulputate. Etiam porttitor turpis nec massa porta interdum. Maecenas euismod, quam euismod interdum venenatis, metus ex placerat mi, vitae mattis elit tellus id libero. Mauris molestie ac mauris sit amet vulputate. Aenean et dui in turpis facilisis faucibus vitae quis neque. Fusce faucibus scelerisque nunc. In efficitur odio nulla, eu mollis ligula pulvinar non. Phasellus imperdiet nunc velit, eget posuere dui tempus vel. Nullam semper, metus id luctus sollicitudin, nibh tellus volutpat urna, et aliquam tortor velit a arcu. Maecenas mauris dolor, vehicula non tellus eu, luctus molestie libero. Aenean vestibulum et ipsum in ultrices. Pellentesque nec vulputate nisi.
Pellentesque luctus justo erat, pulvinar placerat sapien malesuada sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada dui in quam sagittis varius. Aenean commodo dictum erat sed tincidunt. Nunc hendrerit dapibus neque vitae dictum. Aenean lacinia dolor nec ante imperdiet condimentum. Vestibulum bibendum cursus nibh, elementum tempor magna congue nec. In sed justo vel nulla rhoncus ultrices. Ut porta congue sem semper rutrum. Aenean dapibus massa metus, eu pellentesque nibh congue eu. Morbi efficitur sit amet massa a tincidunt. Praesent maximus quam sit amet nulla mattis, a sagittis velit efficitur.
Aliquam sed lectus accumsan, feugiat nisl nec, vestibulum orci. Maecenas aliquet at dui sed consectetur. Sed ornare et ligula a posuere. Integer elementum quis libero non rutrum. Vestibulum maximus eros in enim ullamcorper, sed maximus libero consectetur. Fusce ut nulla ultrices, malesuada risus eu, fermentum est. Praesent lectus quam, cursus vel lacus vitae, luctus malesuada mauris.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lacinia fringilla risus, sit amet gravida urna maximus gravida. Etiam tincidunt auctor fermentum. In non vehicula urna. Mauris turpis diam, facilisis vitae congue at, malesuada ac augue. Praesent augue nibh, ullamcorper id ultrices commodo, ornare in nisi. Pellentesque nunc mauris, fringilla eget accumsan sed, congue nec diam. Curabitur viverra erat ipsum, ut cursus dui fermentum vel. Nam luctus tellus non elit tristique vehicula. Sed mattis eu justo a varius. Integer metus lacus, mattis quis elit id, euismod tincidunt est. Mauris porttitor eros nec risus facilisis posuere. Sed pharetra, felis in commodo tincidunt, nisi purus lobortis elit, rutrum varius nisi mauris ac arcu. Mauris nec odio sed mauris condimentum ultrices sit amet quis purus. Mauris dictum metus sit amet ante gravida aliquet eu sit amet mi.
Aliquam erat volutpat. Nullam at arcu sit amet nunc feugiat fermentum. Duis id mi dui. Cras molestie nec quam sit amet convallis. Sed et mauris augue. Curabitur sodales ipsum lacinia convallis vestibulum. Nullam commodo urna eget nibh consequat auctor.
Nulla facilisi. Quisque ultrices rutrum erat, nec pretium nulla. Aliquam vulputate molestie scelerisque. Suspendisse eu interdum erat, quis dapibus neque. Donec ac pellentesque libero. Nulla erat odio, mattis non dolor ac, pellentesque sollicitudin nunc. Nulla ultrices ac ligula a feugiat. Morbi euismod mauris dolor, eu finibus orci condimentum et. Integer ac dui vel mauris ultrices mattis sit amet a magna. Mauris urna neque, faucibus non erat a, mattis molestie odio. Cras in elit tellus. Donec cursus ultricies sollicitudin. Nullam sed mi tincidunt, dignissim dolor at, suscipit tortor. Donec tortor neque, auctor a tincidunt eget, consequat sit amet eros. Nulla interdum, justo in blandit rutrum, urna nisl molestie urna, in lacinia nisi massa in odio. Pellentesque sodales massa nec pulvinar mattis.
Fusce a consectetur mi, nec egestas nibh. Etiam purus nisi, scelerisque sit amet tempus vitae, blandit at risus. Fusce posuere imperdiet viverra. Quisque vel suscipit turpis. Fusce dapibus non sem eget mollis. Morbi tincidunt lorem a mattis pretium. Duis nunc eros, malesuada id mi non, euismod bibendum tortor. Nulla augue lectus, porttitor ac lectus a, placerat congue sem. Vestibulum blandit lectus at urna vestibulum sodales. Curabitur malesuada tempor justo id varius. Pellentesque posuere sed erat ac iaculis.
Sed ac imperdiet mi, sit amet sodales sapien. Morbi enim neque, aliquet eget venenatis vitae, tincidunt vitae lectus. Cras pellentesque condimentum eros vel euismod. Nunc posuere magna augue, sit amet pulvinar orci auctor vitae. In hac habitasse platea dictumst. Pellentesque id auctor enim, nec sollicitudin lectus. In in pharetra odio, nec blandit diam. Integer vulputate lectus id lectus ultricies pellentesque. Donec a ornare leo, vel egestas lacus. Sed in libero laoreet, posuere sapien ac, ornare felis. Curabitur vel facilisis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum purus sem, bibendum id urna sit amet, iaculis vehicula elit. Cras porttitor urna in diam accumsan eleifend.
Vestibulum magna lectus, venenatis sed venenatis dictum, hendrerit eu arcu. Praesent sed orci id sapien scelerisque ultrices vitae non ante. Donec dignissim magna et rhoncus suscipit. Donec ut hendrerit risus, eget luctus mi. Maecenas vulputate aliquet efficitur. Donec consectetur fermentum magna, a viverra sapien semper ac. Curabitur in lacus eu sapien porta placerat non quis metus. Aenean viverra velit id erat iaculis fringilla. Duis ultrices sollicitudin venenatis. Aliquam id cursus diam.
Curabitur neque lacus, lobortis non massa sed, facilisis luctus ipsum. Nullam eget semper turpis. Sed a lorem vel arcu tempor bibendum. Praesent sem tellus, placerat sit amet est vel, ultrices porttitor sem. Cras egestas pharetra metus, nec aliquam diam consequat vitae. Ut nec ullamcorper tortor. Vestibulum dignissim nisi sit amet interdum rutrum. Integer aliquet lectus id lacus vehicula, sit amet blandit arcu fringilla. Etiam mattis bibendum tristique. Aenean sit amet ultricies odio, eu gravida ante. In vel leo id lacus volutpat accumsan vitae non nulla. Quisque eu rhoncus magna, nec molestie nibh. Nam viverra posuere est ut egestas. Nunc mauris nibh, vulputate sed viverra tincidunt, faucibus condimentum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque diam velit, suscipit ac nisi sit amet, convallis egestas metus.
</p>
</div>
</div>
</body>
</html>
Sorry for the crass example here - but:
1) create a page container, set to 100vh and overflow:hidden.
2) Use the grid system to make your two columns. Set these also to height:100vh.
3) Inside these cols, place a .scrollable div with a max-height of 100vh.
<div class="messages">
<div class="row">
<div class="col m4">
<ul class="scrollable">...</ul>
</div>
<div class="col m8">
<div class="scrollable">...</div>
</div>
</div>
</div>
.messages {
height:100vh;
background-color: silver;
overflow: hidden;
}
.col.m4 {
background-color: white;
}
.col.m8, col.m4 {
height:100vh;
}
.scrollable {
max-height:100vh;
overflow:hidden;
overflow-y:scroll;
padding-bottom:20px;
}
Codepen.
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}
I'm attempting to get a two column layout, where the left column has a button (vertically centered) and the right column is simply text.
I have been able to get the two column layout working, but I cannot get the button centered (the biggest text is dynamic. it can grow and shrink, so the left column needs to be height: 100%).
This what what I have come up with so far:
<body>
<div>
<div style="float: left; width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
<button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.
Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.
Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.
Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.
Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.</div>
</div>
</body>
and to my understanding should be working, but does not seem to be. Any suggestions on how I could get this to work?
I came up with solution to put your content into div with position: relative and making button position: absolute with top: 50%. Is that what you want to achieve?
FIDDLE EXAMPLE
You should make the container display: table and remove the float from the button:
<div style="display: table;">
<div style="width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
<button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.
Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.
Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.
Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.
Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.
</div>
<div style="display:table; width:100%; height:100%">
<div style="display:table-cell; width:20%; height:100%; background:#ddd; vertical-align:middle; text-align:center">
<button type="button">Abc</button>
</div>
<div style="display:table-cell; height:100%; padding-left:20px">
Your content
</div>
</div>
You need just look at this - http://jsfiddle.net/qN53h/
This will resolved your issue. There is height 100% issue for display table-cell. For that fix you may try height:auto or make a fix height for parent display table div or child display table cell div, like this - http://jsfiddle.net/CjT2G/