css - How can I make my dynamically sized lightboxes overflow/scroll correctly? -
I'm sure I'm doing something wrong, but I could not understand it. My Lightboxes size is dynamically (percentage width), and I want content in the lightboxes to scroll essentially on the small screen without laying the boundaries (actually a box-shadow) around the material.
An added warning, I need a "container" div for dynamic height when I set the Container Devices to Height: 100%, I want to see the lightbox function (see the code below) But when I remove the height setting, overflow does not work right now.
This demo should help clarify my details:
This is my CSS:
html {Height: 100%;} body {font-family}: Verdict, Non-Serif; Font-weight: 400; Font size: 12pt; Color: #FFFFFF; Padding: 0 pixels; Margin: 0 px; Background: #ff0000; Height: 100%; Overflow: hidden;} div.container {background-color: # 6d6d6d; Padding: 20px; Height: 100%; & Lt ;! - I want to remove it, but without it one can not understand a way to get the same functionality - & gt; Overflow: hidden;} div.content {background-color: # 6d6d6d; Overflow: Auto; Maximum-height: 100%; Margin: 0 px auto;} div # tab1 {box-shadow: 0 0 px # ffffxset, 0 0 4px # be854c inset; -WebKit-box-size: border-box; -MOZ Box-Size: border-box; Box-size: border-box;} and my HTML:
& lt; Body & gt; & Lt; Div class = "container" id = "tab1" & gt; & Lt; Div class = "content" & gt; & Lt; P & gt; Lightbox content here. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
If your browser support requirements are permitted, then your .container Look at the exact position div, and set its top, left, etc. properly: div.container {background-color: # 6d6d6d; Padding: 20px; Hidden flurry; Status: Completed; Top: 0; Left: 0; Bottom: 0; Correct: 0; } If you are trying to create the status of other elements on the page, but for a lightbox, this is a proper solution.
Comments
Post a Comment