So, I'm developing a system here that opens a modal to edit an information ... The modal opens a DIV background that only takes the size of the screen, if I scroll down this background div is cut. >
I will post images to understand.
This is the modal when I open
AnditlookslikethisafterIrollthebar:
I wanted this div to go with the whole page size! Would anyone have an idea there to help me?
In addition to this html and body 100% trick:
html, body {
min-height: 100%;
}
Your element must be a position: absolute from the body. example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
html, body {
min-height: 100%;
position: relative;
}
.content { max-width: 1060px; margin: 0 auto; }
#overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis veritatis iure soluta rem earum ab tempora iusto laboriosam sed temporibus illo optio hic, totam labore deleniti dignissimos excepturi alias consequatur.</p>
<p>Laborum, impedit aspernatur ipsam enim. Optio, corrupti possimus, praesentium voluptatem sint quos accusamus eligendi iusto rerum amet sequi! Voluptatem consequatur beatae officiis magnam accusantium sunt laborum labore in accusamus minus?</p>
<p>Minima cum sit dolore modi. Mollitia adipisci eos accusantium voluptatem voluptatibus rerum vero explicabo sed animi repudiandae vel dolore culpa, perspiciatis accusamus eum fugiat sit praesentium error odio porro? Quas.</p>
<p>Ad reprehenderit fuga atque. Laboriosam harum iure, consectetur reiciendis dolores quisquam, expedita aut! Nisi natus ipsum reprehenderit odio doloremque, culpa accusantium laudantium error amet recusandae, cupiditate quidem? Ipsum, praesentium, dolorem.</p>
<p>Unde laudantium, mollitia quae ex eveniet cupiditate, distinctio doloribus facilis hic est nesciunt eligendi quasi non nostrum voluptate veritatis dignissimos, laboriosam nobis vitae. Voluptatibus ipsum animi in assumenda voluptatum doloremque.</p>
<p>Minima unde eligendi itaque hic eos sint ut reprehenderit cupiditate dolore, doloremque quod maiores, tempora sequi debitis. Quis, reiciendis sint, perspiciatis doloremque dolorem cupiditate, quasi nulla minus, alias consectetur voluptate.</p>
<p>Vero numquam autem reprehenderit ducimus laborum accusantium eaque illum, dicta ullam doloremque! Culpa perferendis quas expedita natus accusantium beatae, odit nam modi, sapiente assumenda minus, distinctio incidunt, doloribus adipisci! Hic!</p>
<p>Soluta mollitia eligendi voluptatum labore natus, facilis, maiores tenetur facere nobis consectetur, autem numquam aut repellendus laudantium. Accusantium, architecto quis deserunt, qui quo, dolor optio est quisquam ut aspernatur saepe!</p>
<p>Facilis reiciendis inventore quibusdam ullam itaque tempore porro consequatur, cumque qui rerum reprehenderit libero voluptate doloribus atque perspiciatis harum, dolor repellendus vero accusamus iusto. Harum explicabo facilis pariatur reprehenderit quibusdam.</p>
<p>Minus numquam nisi praesentium, quos doloribus? Ipsam distinctio, consequuntur quis. Odio vero est placeat, doloribus quod, dicta voluptate consectetur pariatur harum magni mollitia facilis nobis unde, saepe autem quasi inventore.</p>
<p>Consequuntur facere est deserunt illum voluptate aliquid ullam odio tempora eius, iste reiciendis consequatur repellat magni nemo dolore, tempore eveniet eaque enim ex nam delectus modi quae esse. Voluptates, facilis.</p>
<p>Architecto sint, dolor quisquam quidem enim porro molestias. Cum odio, amet, blanditiis ea facere fugiat nisi esse nihil, aliquam quibusdam harum debitis mollitia excepturi eum. Quidem, accusamus. Asperiores, velit culpa.</p>
<p>Repellendus expedita doloremque quis facere magni, voluptas voluptatem nobis at dolor quasi velit, commodi dignissimos eos quia, quod. Porro similique assumenda ea, possimus. Delectus, omnis cupiditate vero tenetur aspernatur quam.</p>
<p>Modi alias nihil at qui rem! Quas perferendis, doloribus. Sunt aut deserunt, natus minima a amet dolore voluptate eligendi placeat! Laudantium laboriosam doloribus quibusdam quaerat optio dolorum minima eum totam?</p>
<p>Eaque suscipit blanditiis itaque, facere iste, quos voluptatum delectus necessitatibus nihil hic veniam dolores voluptatibus reiciendis, nobis sapiente minus perferendis exercitationem ullam dolorem officia consequatur. Sunt totam aspernatur quisquam asperiores.</p>
<p>Similique vero, laudantium explicabo rerum. Nobis id aliquid vel perspiciatis explicabo et hic numquam commodi esse incidunt consequatur necessitatibus, quod, officiis! Rem ipsum dolore facilis, beatae quam hic culpa quis!</p>
<p>Nam fuga rem magni corrupti cum, corporis ducimus iste ex unde cupiditate ipsum voluptate maxime doloremque minus rerum similique laboriosam optio veritatis sapiente. Fugit harum excepturi temporibus, sint nam, dolorem?</p>
<p>Harum quis, dolores explicabo sint, ratione aperiam earum quo sapiente soluta optio quae necessitatibus autem et doloribus nemo esse numquam perferendis repudiandae, nostrum saepe velit nam? Dolorum deserunt ex ipsa!</p>
<p>Temporibus tempore nulla laborum aliquid? A, ipsa, architecto. Recusandae veniam quisquam nisi obcaecati laudantium adipisci mollitia, sequi iusto est inventore, ad non. Porro, distinctio itaque accusamus blanditiis omnis autem, nostrum.</p>
<p>Veritatis voluptate, impedit reiciendis, eius debitis ex at sit id error accusantium repellat libero non repudiandae ipsa labore consectetur ducimus autem dignissimos accusamus voluptatibus dolorem. Perspiciatis porro rem officia architecto?</p>
<p>Sapiente illo autem laudantium laboriosam fugit pariatur voluptatibus quod nostrum, doloribus perspiciatis aspernatur error quos dolorem suscipit. Autem adipisci ullam ab accusamus, illo minima! Voluptatum ea praesentium quas nostrum consequuntur.</p>
<p>Possimus eum optio exercitationem adipisci animi dignissimos earum sed ab, cumque, rerum doloremque mollitia vitae autem, nulla! Reiciendis minus, eius nulla. Odit quae itaque quam aut, iure voluptatum, iusto aliquid.</p>
<p>Explicabo fugit, non, quasi odio quod tempore magni dicta consequatur possimus incidunt, provident aliquid! Nesciunt et accusamus aliquam repellat debitis veritatis numquam corrupti ullam ipsum ipsam, voluptatibus officiis unde pariatur.</p>
<p>Porro neque omnis voluptas dolorum atque et ipsum ratione rem autem necessitatibus vitae magnam voluptatibus, molestias vero eum officiis, laboriosam possimus hic doloremque dolor sit. Commodi animi fugit temporibus saepe.</p>
<p>Explicabo neque, mollitia hic, laboriosam eligendi eaque repellat omnis! Culpa, odit recusandae. Sunt atque exercitationem, deserunt beatae nesciunt iure vel pariatur aspernatur soluta rem aut sequi expedita eligendi. Eligendi, animi?</p>
<p>Totam mollitia placeat dignissimos commodi magni quaerat, voluptatem animi ex hic fuga doloremque distinctio modi fugit, blanditiis numquam delectus facilis culpa, ipsam itaque minima. Nihil rerum dicta repudiandae repellendus ducimus.</p>
<p>Praesentium suscipit, voluptatum optio cum doloribus sit! Quam eaque, fuga, accusantium ad inventore ipsa voluptatum repellendus sint itaque nobis tempore maxime perferendis nemo minima dolorum, aliquam eius officiis nisi quaerat.</p>
<p>Quaerat sapiente, est ipsam quas, ex eos cum, ipsum modi sint debitis officia at. Officiis, provident voluptate. Totam molestiae esse sed provident, veniam ducimus consequatur impedit, beatae eveniet distinctio hic.</p>
<p>Saepe, accusantium sint, iusto eveniet vero perspiciatis voluptatibus maxime voluptate est quibusdam ab! Enim accusamus quis facere, dicta sequi, ratione vero eos mollitia, excepturi iste vel aliquid reiciendis! Unde, asperiores.</p>
<p>Atque accusantium quidem possimus sit molestias ullam praesentium quaerat fuga unde iusto optio, aperiam deserunt voluptatem ducimus provident rerum dolorum vel! Laudantium velit veritatis quis cum sequi suscipit, mollitia expedita!</p>
<p>Explicabo modi et voluptatibus accusantium in dolorum, doloribus ipsa ipsum doloremque id neque itaque, animi magnam vero reprehenderit quae sunt ducimus expedita incidunt sint sequi consequuntur totam minus. Architecto, ad!</p>
<p>Delectus beatae facere eaque. Praesentium earum inventore molestias quia iusto! Quidem consequuntur maiores, omnis veritatis iste beatae assumenda eius, at sequi dolores, blanditiis consectetur qui soluta reiciendis distinctio facere ducimus!</p>
<p>Laudantium rerum consectetur iusto quod reprehenderit non, aliquam nobis cumque esse animi ducimus impedit dolorem placeat officia pariatur dolores sed ipsa unde, ipsam itaque deserunt? Odit velit dolorum similique quos.</p>
<p>Nobis vitae quisquam quis eos commodi mollitia, possimus veritatis voluptas! Sint ad possimus ab odio repudiandae laudantium et nobis veritatis facere iste voluptates hic, sed ipsum voluptatibus enim, blanditiis eius!</p>
<p>Labore modi, explicabo. Quas quaerat aspernatur illo, explicabo maiores quos praesentium, in recusandae neque alias! Voluptates saepe, ratione maiores perspiciatis iusto obcaecati architecto quasi. Architecto beatae quasi corporis debitis consequatur!</p>
<p>Quo facere amet ipsam dolore fugit veritatis accusantium iste earum laudantium fuga, iure incidunt debitis aut, placeat ullam necessitatibus. Voluptatum explicabo perferendis, voluptas quidem praesentium quibusdam quaerat possimus in architecto.</p>
<p>Perspiciatis nam maxime facere pariatur, nihil architecto illum laboriosam hic neque non voluptatem sit, ipsum quasi est nemo ut, mollitia cupiditate! Assumenda laudantium rem quam labore nostrum, tempore reprehenderit eos!</p>
<p>Nihil tenetur ipsam quidem sint, fugiat doloremque voluptatibus autem esse vel, quam quo provident at saepe, nemo veritatis ab labore ex nulla excepturi laborum. Excepturi magni corrupti ipsam, quae id!</p>
<p>Aut in atque laudantium soluta voluptates ut non dolores, cupiditate corrupti facere beatae velit iste deserunt inventore quibusdam quisquam reprehenderit, laboriosam aspernatur earum, eveniet, eligendi? Ipsa perspiciatis aspernatur eligendi. Mollitia?</p>
<p>Sunt debitis eos quasi hic sapiente doloribus cum maxime cumque, nobis at impedit nulla quam nostrum tempora fugit, maiores perspiciatis iure! Blanditiis reiciendis alias saepe officia dolorem illum dignissimos aperiam!</p>
</div>
</body>
</html>
You have some ways to do this, or you limit the size of the modal and place a scroll inside it, for example:
height: 100px;
overflow: scroll;
In this way you could even put a: position: fixed; in your css and set the size in relation to the top top: 50px; , for example.
Another thing you can do is to put your background fixed, so when you scroll down the background background of the modal is not half way and thus you have no problems if someone scrolls.
background-attachment: fixed;
background-size: cover;
I hope to help, if you think this is not the best solution, I would ask you to put here the way you are doing the div's to help you a little bit more.
Cumps,
You have to pay attention to how your background element is behaving, for example if it is with height: 100% then it will never exceed this size and therefore there is the cut, you can solve by leaving the background element position: fixed and enable scrol overflow-y: auto
or set the minimum height of 100% min-height: 100% so when your content exceeds the minimum height it will adjust according to the amount of content.
I do not quite understand, do you want to leave occupying 100% of the page?
If you try the code:
.suadiv{
heigth:100%;
}