Related
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 working on a profile-kind-of template – half the page (class="actor-info") should show scrollable text and info about a person and the other half should be filled by the person's portrait picture. The picture should always fill half of the screen – so cropping would be fine.
What I have so far:
all ancestor element set to height 100%
left column and right column are both flex boxes
the image container has the property object-fit: cover;
the image container has the property position:fixed;
the image hight and width are set to auto
Basically it looks 'as if' it worked right – but when changing the browser window with the image doesn't adopt to the width – so at some point the portrait doesn't fill the height.
What I have so far:
<div class="layout">
<div class= "actor-info">
Lorem Ipsum
</div>
<div class="actor-portrait">
<div class="img-container">
<img src="…">
</div>
</div>
</div>
CSS:
html, body, .layout {
width: 100%;
height:100%;
}
.actor-portrait,
.actor-info {
width: 50%;
height:100%;
}
.actor-portrait .img-container {
height:100%;
}
.layout {
align-items: stretch;
display: flex;
width: 100%;
height:100%;
}
.actor-portrait .img-container {
object-fit: cover;
position:fixed;
}
.actor-portrait .img-container img {
width:auto;
height:auto;
}
I hope somebody has done this / been there before? All pointers appreciated! Thank you!
EDIT: I added a 'wireframe' of what i have – and what i would like to have. The image should 'cover' the red rectangle at all times and would get cropped ba the rectangle (.img-container).
As you use predefined width's and height's, you can simplify the code a lot and use background and background-size: cover to accomplish that.
Stack snippet
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
And if you need to set the image source in the markup, you can do that too.
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
If you still want to use object-fit: cover you can, though it has less browser support than background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>
I actually did something similar on a site, but I had a fixed side nav to deal with too: polarlab.anchoragemuseum.org.
I don't remember exactly where I found this code initially, but the trick is the css on the image. I've adjusted the markup and css a bit to accommodate a fixed image.
Here's a fiddle for reference as well.
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>
I read most of the questions that came up for this, but they do not seem to work. These two in particular seemed to be what I was after, but I don't want the footer fixed to the bottom of the viewport.
How to keep footer always at the bottom of a page?
How to keep always at the bottom of page,( not screen) in html5
Here is my HTML. I am building in Laravel 5.3's Blade templating engine, but using Bootstrap:
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #d3e0e9;
overflow: auto;
padding: 5px 0 5px 0;
p {
margin: 0px;
}
}
<footer class="footer">
<div class="container">
<p>Stuff</p>
</div>
</footer>
EDIT: Attempting to clarify what I am asking here and also removed references above to changing the viewport size. That is cause for confusion and ultimately isn't relevant to what I am asking.
Can take fixed off the table for the time being as that won't be a solution: I don't always want the the footer at the bottom of the view port regardless of content.
Assume the viewport is and will always be full screen on a desktop.
Assume first page one has very little content and a footer below the content.
Relative leaves an ugly gap between the bottom of the footer and bottom edge of the viewport.
Absolute puts it up against the bottom border. This appears to be the correct option for a page with very little content.
Now assume a new page with the same footer, but there is a ton of content with several pages of scrolling in the browser.
Absolute (at least when I am using it) tends to stay at the bottom of the viewport and not below the content.
Relative will put it below the content and will be the solution for this problem.
But now it won't work with the page with very little content.
It seems like I need a mix of these two, but the only thing that comes to mind is using JQuery, testing if the content goes passed the bottom edge of the viewport. If it does, change the CSS to relative from the default absolute.
Seems like there would be an easier way to accomplish this with just CSS.
https://jsfiddle.net/jxg3c6ue/
If you use relative-absolute position relationship. But I would not advice this way of programming. Media query is the most suitable for your project. However, I just answer on how can it be done in other ways.
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p>
</div>
<footer>
this is a footer
</footer>
Without content
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
</div>
<footer>
this is a footer
</footer>
There are some good difference between absolute and fixed positioning. You should definitely google it to understand better. Meanwhile in short absolute positioning is done respective of the parent relative / absolute position.
I'm not clear about question since it's too wage to read. Hoping that you are looking something like. Footer always stay bottom to the viewport.
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:calc(1000px - 40px);
position:relative
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Footer staying at the bottom of viewport
.pageFooter{
background:#ddd;
color:#3d3d3d;
position:absolute;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
<div class="pageFooter">
This will be positioned at the bottom of the page
</div>
If you want to switch between absolute and fixed position in different viewport. use media queries. The above given will switch to absolute positioning in mobile devices
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
#media only screen
and (max-width: 600px) {
.viewFooter{
position:absolute;
}
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Make sure the footer div is directly appended to body tag.
Hey i have wrapper and container which i divide on 2 sides, left and right. I can't add any colors, backgrounds, fonts or anything to right side. Is this good way to solve this problem or should i be doing something else? And if you know how to fix let me know, i tried using !important but it's not working. Adding jsfiddle and code:
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
}
.rightbox.color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Change your selector from .rightbox.color-box to .rightbox .color-box
CSS Selectors
You need to follow css standards. If you write .rightbox.color-box this means both the classes are there in same div but here you are trying to target .color-box which is children of .rightbox so you need to give space between both classes
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
background: #ccc;
color: red;
}
.rightbox .color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Read brief about css selectors here
Please add this code
#wrapper .leftbox {
float: left;
width: 50%;
padding: 0;
}
#wrapper .rightbox {
float: left;
padding: 0;
padding-right: 0;
background: #000;
width: 50%;
}
I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.