I'm having a problem with a flexbox layout inside an iframe. The layout works fine in a normal view, but once placed inside an iframe (like here in this snippet or codepen etc.), the flex children of the second flex column doesn't have equal heights anymore.
I can't really show you the difference, because all snippets are automatically placed in iframes...
*,
*::before,
*::after {
box-sizing: border-box;
}
.b-block {
margin: 0 auto;
max-width: 1000px;
padding: 10px;
}
.b-block__wrap {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}
.b-block__item,
.b-block__item--large {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-direction: column;
padding: 0 10px;
margin-bottom: 10px;
justify-content: space-between;
}
#media (min-width: 992px) {
.b-block__item,
.b-block__item--large {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 0;
}
}
.b-article,
.b-article--large {
display: flex;
flex: 1; /* works in a div but not in an iframe */
/* flex: 0 1 auto; // works but without equal heights */
padding: 10px;
font-size: 16px;
background: #eee;
}
.b-article:not(:last-child) {
margin-bottom: 10px;
}
.b-article--large {
min-height: 300px;
}
<section class="b-block">
<div class="b-block__wrap">
<div class="b-block__item--large">
<article class="b-article--large">Vivamus erat sit habitasse nisi quam penatibus proin nascetur hac volutpat porttitor ad condimentum mauris aenean fames lectus tincidunt inceptos
</article>
</div>
<div class="b-block__item">
<article class="b-article">Convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.
</article>
</div>
</div>
</section>
Is there any workaround for this?
I already tried:
• Wrapping the b-article in the second b-block__item in an extra div
• Setting the flex property of the b-article in the second b-block__item to flex: 0 1 33%;
but no luck yet.
Is this even possible in an iframe?
Thanks!
Related
This question already has an answer here:
Child div is bigger than parent div
(1 answer)
Closed 2 years ago.
Hello I have a Flexbox Container with three childs. The first one has a textarea like indicated.
However the textarea of the child exceeds the parent element.
It only should be within the parent element in the child.
Second I want to make the content scrollable within child 2 and 3.
Many hours of search could not give me any resolution.
Do you have one?
Thanks in advance for helpful answers.
.flex-rows {
display: flex;
flex-direction: column;
}
.flex--1 {
flex: 1 1 auto;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="flex--1">
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
In order to make content in .child2 and .child3 scrollable, you need to set a height height: 250px; and overflow-y: scroll; on each of the elements.
Additionally, your textarea is exceeding the parent because its padding is giving it some extra height. Setting box-sizing: border-box; on .child3 textarea makes it so the padding is included in the element's height. See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
.flex-rows {
display: flex;
flex-direction: column;
}
.flex--1 {
flex: 1 1 auto;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
.child2, .child3 {
height: 250px;
overflow-y: scroll;
}
.child1 textarea {
box-sizing: border-box;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="flex--1">
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
<div class="child3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
</div>
</div>
Try add overflow-y: scroll; to the textarea
.flex-rows {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
.child1 textarea {
overflow-y: scroll;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="parent flex-rows">
<textarea class="child1"></textarea>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
</div>
I have a web page which displays 2 columns. On a PC the two columns display exactly as I want them, but something goes wrong when viewed on a mobile screen.
On mobile screen I want the second column to drop below the first column and I want both columns to be centered on the screen, but what happens is that the first column is on the left of the screen and the second column (which is a Facebook feed) is too wide for the screen, even though I set the width at 80%.
Here is my html:
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
and here is my css:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 60%;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF TWO */
.span_1_of_2 {
width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
width: 32.2%;
}
/* IF screen is LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 90%;
}
/* COLUMN SETUP */
.col {
display: block;
margin: auto;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:block;
margin: auto;
}
.group:after {
clear:both;
}
/* GRID OF THREE */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 50%;
}
}
I have tried changing lots of parameters in the css but cannot make it work and now I am lost for options.
Can anyone help me to get these columns aligned?
Many Thanks
Tog
by using flex & flex direction you can change how the columns are placed.
you can read more here
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}
#media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
I was wondering if the layout I draw on the following image is possible using flexbox and this HTML structure:
<div class="box">
<img src="url..." alt="" />
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
It would be great if this could be done with flexbox and without adding more boxes inside.
For fixed image width and height, it's possible. The main idea is in the following snippet.
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
}
.img {
width: 300px; height: 300px;
}
h5, p {
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
Since the height of the parent is the same as the height of the image, the content overflows and gets wrapped to the right. Then we have to manually set the width because it's otherwise going to 100% of the parent.
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
.box:nth-child(even) .img {
order: 3;
}
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a </p>
</div>
Full-height paragraph
You might want to extend your paragraph all the way to the bottom (maybe add some links there). It's easy to extend it so you can turn p into flexbox to snap something to the bottom, for example (this example not in the demo below, you can only notice this by the gray background).
.box {
/* ... */
justify-content: space-between;
}
p {
flex-grow: 1;
}
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
justify-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
p {
flex-grow: 1;
}
.box:nth-child(even) .img {
order: 3;
}
<div class="box">
<div class="img"><img></div>
<h5>Version 2</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. </p>
</div>
Both versions above breaks when the text cannot fit (try changing browser window size).
Doesn't show all, but never breaks
You can set the max-height for the paragraph if you don't want it to break and clip the text which cannot fit with overflow: hidden.
p {
max-height: 250px;
overflow: hidden;
}
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
justify-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
p {
flex-grow: 1;
}
.box:nth-child(even) .img {
order: 3;
}
p {
max-height: 250px;
overflow: hidden;
}
<div class="box">
<div class="img"><img></div>
<h5>Version 3</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. </p>
</div>
I am trying to implement a sticky footer with CSS using this: http://www.cssstickyfooter.com/using-sticky-footer-code.html .
I have almost got it working, but when having floats in my content container, I find that the footer will overlap a bit of the content.
This is the markup:
<div class="container" id="content-area">
<div class="module-content" id="mycontent">
<div class="menu">
<ul>
<li>
<a class="current-page" href="http://localhost/">1</a>
</li>
</ul>
</div>
<div class="module-content">
<div>
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac
dui, nulla lacus hac, raesent euismod habitant eros massa
nulla. Justo dui, facilisis cras. Est ante maecenas
vehicula, etiam vestibulum mi lorem massa, sed nullam
suspendisse lectus ante purus gravida, iaculis urna pede
fermentum. Arcu id ligula arcu, erat vivamus quisque
quisque, tristique ipsum et. Sociis duis ut, morbi dolor
duis volutpat lacus viverra, scelerisque sodales sed, vel
nulla. Elit pede nullam ullamcorper consectetuer ac massa,
lobortis eget id dictumst et quis, nulla metus. Magnis id
id suscipit porttitor faucibus, felis commodo risus massa,
fusce tempus praesent aliquet sit vulputate tempor.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
<div class="container">
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
nulla lacus hac,</p>
</div>
</div>
And the CSS:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
overflow: auto;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
And a fiddle of the above: http://jsfiddle.net/CfuAg/
And a picture of what's happening
Why is this happening and what are some ways to fix it? I tried adding a padding of 70px to #content-area, but it pushes the footer down by 70px and doesn't stick to the buttom of the window anymore.
Fixed! overflow: auto was assigned to the wrong element (it should be assigned to .module-content) and module-content should have a bottom-padding with a height of the footer:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
overflow: auto;
padding-bottom: 70px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
I've modify your fiddle to make it works the way I understood what you're looking for.
I've remove the clear: both; and margin-top: -70px; and use instead the bottom property which I've set to 0
http://jsfiddle.net/CfuAg/4/
Hope this is what you looked for.
I'm trying to create a scroll bar inside the #main div so that I can scroll that without scrolling the page or the title but it isn't working. What am I missing?
My code is as follows:
CSS
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position: absolute;
top: 40px;
bottom: 0px;
width: 80px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: auto;
overflow: scroll;
}
HTML
<div id="topbar">
hello
</div>
<div id="sidebar">
<div id="title">
title
</div>
<div id="main">
<!-- lots and lots of text-->
</div>
</div>
You can find an example JSFiddle here: http://jsfiddle.net/PTRCr/
Thanks
You're still on this project I see. There's also a lot of answers, but I see no one has made a working example of what I think you're asking for.
Here's a working example that (I hope) does what I think you're asking for.
I added content shifting wrappers so that the height can still be 100%. You can read more about that technique from this answer. I also removed all that absolute positioning, I see no reason why you should do that.
Each wrapper adjusts for the previous content, first the top bar with the height 40px and then the title with 30px.
This example should also follow your previous specifications, where the scrollbars will stay on the same baseline when resized.
As you can see, by the code below, it is possible to do a CSS only solution despite what others have lead you to believe. It just takes a bit of tricks from the bag of CSS holding.
Man, I'm such a dork.
Example | Code
HTML
<div id='container'>
<div id="top-bar">hello</div>
<div class="wrapper">
<div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div>
</div>
</div>
CSS
body, html{
height:100%;
width: 100%;
line-height: 100%;
margin: 0; /* Normalization */
padding: 0; /* Normalization */
}
div{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#container{
height:100%;
width: 100%;
text-align: center;
overflow: auto;
}
#top-bar{
height: 40px;
line-height: 40px;
border: 1px solid lightblue;
background: blue;
color: white;
text-align: center;
}
.side-bar {
width: 120px;
height: 100%;
text-align: center;
color: white;
border: 1px solid DarkOrchid;
display: inline-block;
vertical-align: top;
}
.title {
height:30px;
line-height: 30px;
border: 1px solid salmon;
background: red;
}
.wrapper{
margin-top: -40px;
padding-top: 40px;
height: 100%;
width: 100%;
white-space: nowrap;
}
.wrapper > div{
white-space: normal;
}
.content_wrapper{
margin-top: -30px;
padding-top: 30px;
height: 100%;
}
.content{
color: black;
height: 100%;
overflow: auto;
}
The element you want to be scrollable, should
Have height and width defined
have attribute overflow:auto
Example:
.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
CSS are stylesheet whose only purpose are to style document. They cannot investigate a pre-existing elements.
The only ways are whether the size of the div has to be fixed or you have to use some JavaScript to find out the exact height. The ways of which this can be done with CSS have already been presented by other users.
So, here is a way you can do using jQuery
$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());
Demo
In your case change CSS:
#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;
}
You should define the height of the <div id="main" to show the scrollbar on it. whether you calculate it using javascript or jquery.
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position:absolute;
top: 40px;
bottom: 40px;
width: auto;
height:200px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: 100px;
width: 100%;
overflow:auto;
}
Check this updated jsFiddle.
You need to set height for #main. It is working at http://jsfiddle.net/PTRCr/7/
#main {
height: 100px;
overflow-y: scroll;
}
It is only possible if you know the height of your #title, in either px or as a percentage of its parent container
#title set in px jsFiddle
#main {
position:absolute;
top:30px; /* set this to whatever you have set the height of #title to*/
bottom:0px;
overflow-y: scroll;
}
#title set as % jsFiddle - Tested in IE/FF/Chrome