मेरे पास <body> टैग के अंदर, मेरी साइट पर एक मॉडल पॉपअप बॉक्स है।ब्राउज़र विंडो आकार के सापेक्ष अधिकतम ऊंचाई सेट करना, शरीर का आकार
.modalbox {
text-shadow: none;
position: absolute;
padding: 22px;
left: 50%;
background: white;
z-index: 90;
border-radius: 6px;
display: none;
font-size: 14px;
width: 80%;
}
चौड़ाई सेट करना सरल है:
इस पॉपअप के स्टाइल है। हालांकि, लंबवत सामग्री गतिशील है और इसमें मेरी समस्या निहित है - मैं नहीं चाहता कि बॉक्स ब्राउज़र विंडो से लंबा हो।
मैंने max-width: 90%; सेटिंग करने का प्रयास किया है, और यह काम करता है यदि पृष्ठ की body ब्राउज़र विंडो से लंबवत नहीं है।
हालांकि, जब body अतिप्रवाह (और स्क्रॉलबार दिखाई देते हैं), तो 90% अधिकतम ऊंचाई से ऊपर body की ऊंचाई, नहीं खिड़की के सापेक्ष है। इसका मतलब है कि मोडल बॉक्स लंबवत विंडो से बाहर निकल सकता है, जिससे उपयोगकर्ता को अपनी पूरी सामग्री देखने के लिए पेज को स्क्रॉल करने के लिए मजबूर किया जा सकता है।
जो मैं पूरा करना चाहता हूं वह उस अधिकतम ऊंचाई के लिए ब्राउज़र विंडो का 90% होना है ताकि संपूर्ण मोडल बॉक्स हर समय दिखाई दे।
मैं ओवरफ़्लो को संभालेगा, मुझे बस ऊपर वर्णित तरीके से लंबवत आकार को प्रतिबंधित करने में सहायता करने की आवश्यकता है।
ऊंचाई? चौड़ाई? किसी भी तरह से, आप ['vw' और' vh' इकाइयों] (http://caniuse.com/#feat=viewport-units) के साथ कुछ करने में सक्षम हो सकते हैं, बिना किसी पहेली के बताना मुश्किल है। –