I have the following HTML layout:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
The number of children and their heights can vary. Is it possible to style the parent element to divide the children into two columns, such that the parent takes the minimum possible height?
.parent {
display: flex;
flex-flow: column wrap;
margin: 0 -5px;
width: 500px;
height: 1500px; /* I want to remove this */
}
.child {
margin: 0 5px 10px;
width: 50%;
background: #f2f2f2;
border: 1px #ccc solid;
padding: 20px;
}
<div class="parent">
<div class="child">
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
dignissim auctor.</p>
</div>
<div class="child">
<h3>Heading 2</h3>
<p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
</div>
<div class="child">
<h3>Heading 3</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.
</p>
</div>
<div class="child">
<h3>Heading 4</h3>
<p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
quam.</p>
</div>
<div class="child">
<h3>Heading 5</h3>
<p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
<div class="child">
<h3>Heading 6</h3>
<p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
enim tortor, viverra non posuere ut, dapibus sed elit.</p>
</div>
<div class="child">
<h3>Heading 7</h3>
<p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
</div>
http://codepen.io/anon/pen/NqLYjE
In the above example, I was able to achieve the two column layout by setting height for the parent element. I want to do it without setting the height. Is it possible?
Setting flex-direction to row is ugly, as there will be whitespace between two vertical child elements when the height of children on a single row are unequal.
I believe you need the column propertie and not the flex model.
forked pen
.parent {
-moz-column-count:2;
column-count:2;
-moz-column-gap:0;
column-gap:0;
margin: 0 -5px;
width: 500px;
}
.child {
margin: 0 5px 10px;
background: #f2f2f2;
border: 1px #ccc solid;
padding: 20px;
}
<div class="parent">
<div class="child">
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
dignissim auctor.</p>
</div>
<div class="child">
<h3>Heading 2</h3>
<p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
</div>
<div class="child">
<h3>Heading 3</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.
</p>
</div>
<div class="child">
<h3>Heading 4</h3>
<p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
quam.</p>
</div>
<div class="child">
<h3>Heading 5</h3>
<p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
<div class="child">
<h3>Heading 6</h3>
<p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
enim tortor, viverra non posuere ut, dapibus sed elit.</p>
</div>
<div class="child">
<h3>Heading 7</h3>
<p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
</div>
Related
I have a flexbox A with 100vh height.
This flexbox contains a child flexbox B.
Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
My real code is more complex (vuejs components). Is there a way to fix this code ?
Update your code like below:
body {
margin: 0;
}
.parent {
height: 100vh;
display: flex;
flex-direction: column;
}
.child1,
.child21 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child2 {
min-height: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child21 {
background: green;
}
.child22 {
overflow: auto;
}
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra viverra, orci
dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus. Nunc facilisis
orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum, non luctus sapien
vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed lobortis arcu sit
amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est. Nulla in nulla sagittis,
ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat risus volutpat eu. Nulla
pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
just add a height to your div with .child22 class as followed:
Learn more about overflow
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
height:50px;
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
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.
I'm trying to create a basic CSS page with two side by side divs, one for a left nav, one for content. I was following the answer on this page:
CSS 2 Div Layout float
and I can achieve the side by side look I want but when I resize the browser, the right div content is getting cut off.
Browser (Chrome) full width of my screen:
Browser resized:
My code (we are using bootstrap):
<div class="container-fluid bs-docs-container">
<div class="row">
<div style="width: 300px; float:left; height:100%; background:gray; margin:0; color:white;">This is the side bar</div>
<div class="container" style="margin-left:320px; width: 90%;">
<div style="display: inline-block; height:100%; background:black; color:white; width: 90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Justo nec ultrices dui sapien eget. Aliquam sem fringilla ut morbi. Ut sem nulla pharetra diam sit amet. Massa eget egestas purus viverra accumsan in nisl. Nulla facilisi nullam vehicula ipsum a. Ridiculus mus mauris vitae ultricies leo integer malesuada. Risus sed vulputate odio ut enim blandit volutpat maecenas. Fusce id velit ut tortor pretium viverra.
Faucibus purus in massa tempor nec feugiat nisl. Amet commodo nulla facilisi nullam vehicula ipsum. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Pellentesque habitant morbi tristique senectus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Pulvinar etiam non quam lacus suspendisse faucibus. Est sit amet facilisis magna etiam. Adipiscing bibendum est ultricies integer quis auctor. Enim eu turpis egestas pretium aenean pharetra magna. Risus sed vulputate odio ut.
Sit amet commodo nulla facilisi nullam vehicula. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Venenatis urna cursus eget nunc. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Amet dictum sit amet justo donec enim diam vulputate ut. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Amet purus gravida quis blandit. Integer enim neque volutpat ac tincidunt vitae semper quis. Iaculis at erat pellentesque adipiscing commodo elit. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat nisl vel pretium lectus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.
Tellus mauris a diam maecenas sed enim. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Faucibus in ornare quam viverra orci sagittis eu. Volutpat diam ut venenatis tellus in. Turpis in eu mi bibendum neque egestas congue. Eget mi proin sed libero enim sed. Euismod quis viverra nibh cras. At in tellus integer feugiat scelerisque varius morbi enim. Sed viverra ipsum nunc aliquet bibendum enim. Viverra orci sagittis eu volutpat odio facilisis mauris. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Eget mauris pharetra et ultrices neque. Amet nulla facilisi morbi tempus. Libero volutpat sed cras ornare arcu dui. Diam ut venenatis tellus in.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nibh mauris cursus mattis molestie. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Condimentum id venenatis a condimentum vitae sapien. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Magna sit amet purus gravida quis blandit turpis cursus. Bibendum ut tristique et egestas quis ipsum. Viverra nibh cras pulvinar mattis. Sed augue lacus viverra vitae congue eu consequat ac. Aliquam purus sit amet luctus. Habitant morbi tristique senectus et netus et malesuada fames. Tortor posuere ac ut consequat semper viverra nam libero justo.</div>
</div>
</div>
</div>
I noticed you have a margin-left: 320px on your second div, that might be pushing the content outside the windows frame since it's actually more that the width of your sidebar. If you want the content not to be against the browser's border try adding a padding instead
Try using this structure, maybe it'll help you, with this the sidebar has a static width and the content uses the remaining space.
.wrapper {
display: flex;
height: 100vh;
align-items: stretch;
}
.sidebar {
background-color: #EEEEEE;
min-width: 300px;
}
.content {
color: white;
background-color: black;
padding: 20px;
margin-left: 20px;
}
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
</div>
</div>
How would I go about a three column layout to keep the background image from collapsing and get everything aligned to the top. I've got it almost right, but my ads keep falling below everything else. Could it be because I've got the #content as an inline block? I need testimonials on the left, content in the center, and ads to the right. Plus have the background image still visible.
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div><!-- end #wrapper -->
</body>
CSS: (thus far)
#wrapper{background-image: url(images/columns-195-570-195.png);
width: 960px;
align-content: center;}
#testimonials{
float: left;
width: 195px;
}
#content{
display: inline-block;
width:570px;
}
#ads{
float: right;
width: 195px;}
Thanks!
OK here you can find both solutions. A solution with floating (you need it) and a solution with flexbox.
Solution only with floating
#wrapper{
align-content:center;
background-image: url(images/columns-195-570-195.png);
width: 960px;
}
#testimonials{
float:left;
width:195px;
}
#inner-wrapper {
float:left;
}
#content {
display:inline-block;
width:570px;
}
#ads {
float:left;
width:195px;
}
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div><!-- end #wrapper -->
Solution with flexbox
#wrapper{
align-content:center;
background-image:url(images/columns-195-570-195.png);
display:flex;
width:960px;
}
#testimonials{
width:195px;
}
#content{
width:570px;
}
#ads {
width:195px;
}
<div id="wrapper">
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
You don't need the wrappers or floats to get a working three-column-layout.
If you change the order of testimonials and content div's in HTML, it will work fine. Demo
#testimonials {
float: left;
width: 195px;
}
#content {
display: inline-block;
width:570px;
}
#ads {
float: right;
width: 195px;
}
HTML:
<div id="testimonials">.. </div>
<div id="content">..</div>
Inner-wrapper is creating a div displaying testimonials and content as block that is pushing the ads to a new line. Either move the end div to contain all three sections, or display the inner-wrapper and ads as inline-block so they line up correctly.
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
<!-- end #inner-wrapper -->
</div>
<!-- end #wrapper -->
To center content add:
#wrapper {
background-image: url(images/columns-195-570-195.png);
width: 960px;
margin: 0 auto;
}
Try to use float: left; on each column, you can add (if necessary) a float: clear; on your latest column.
Regarding your issue with the image, you need to set the size and position for the wrapper div.
Example also visible here: https://jsfiddle.net/er4h0e95/6/
#wrapper {
position:absolute;
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg);
width: 960px;
height:100%;
align-content: center;
}
#testimonials {
float: left;
width: 195px;
}
#content {
float: left;
width:570px;
}
#ads {
position:absolute;
float: left;
width: 195px;
right:0;
}
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
</div>
<!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
<!-- end #wrapper -->
When we add an element with position: fixed to the Tab Content, it is positioning the element with respect the Tab Content instead of the Body, any fixes for this? Code Pen attached.
.fixed-element {
position: fixed;
top: 10px;
left: 10px;
background: #aaa;
}
Code Pen
postion: fixed; under transform: translate is not working for the time being, please refer the below link for more info: https://code.google.com/p/chromium/issues/detail?id=20574
Can you take a look at this codepen here
I took the content out and then I am displaying the content based on which tab user select. (see ng-switch). Hope this helps you. Thank you.
Since I am new too. Let me know If I did some mistake.
My code :HTML
<div class="tabsdemoDynamicHeight" ng-app="MyApp">
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom=""md-selected="tabs.selectedIndex">
<md-tab id="tab1" aria-controls="Tab 1" label="one">
</md-tab>
<md-tab id="tab2" aria-controls="Tab 2" label="two">
</md-tab>
<md-tab id="tab3" aria-controls="Tab 3" label="three">
</md-tab>
</md-tabs>
<md-content class="md-padding">
<ng-switch on="tabs.selectedIndex">
<div ng-switch-when="0">
<!-- put the content of tab 1 here-->
<h1 class="md-display-2">Tab One</h1>
<div class="fixed-element"> Fixed Element</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</div>
<div ng-switch-when="1">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</div>
<div ng-switch-when="2">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</div>
</ng-switch>
</md-cotent>
</md-content>
</div>
CSS:
.fixed-element {
position: fixed;
top: 10px;
left: 10px;
background: #aaa;
}