मेरे पास मेरे पृष्ठ के बाईं ओर एक नेविगेशन बार है, और मैं चाहता हूं कि यह पृष्ठ की ऊंचाई के 100% तक फैल जाए। न केवल व्यूपोर्ट की ऊंचाई, बल्कि आपके द्वारा स्क्रॉल किए जाने तक छिपे हुए क्षेत्रों सहित। मैं इसे पूरा करने के लिए जावास्क्रिप्ट का उपयोग नहीं करना चाहता।
क्या यह HTML / CSS में किया जा सकता है?
जवाबों:
यहाँ एक समाधान मैं अंत में एक गतिशील पृष्ठभूमि के लिए एक कंटेनर के रूप में एक div का उपयोग करते समय आया।
z-indexगैर-पृष्ठभूमि उपयोगों के लिए निकालें ।leftया rightपूर्ण ऊंचाई वाले कॉलम के लिए।topया bottomएक पूर्ण चौड़ाई पंक्ति के लिए।EDIT 1: नीचे सीएसएस को संपादित किया गया है क्योंकि यह एफएफ और क्रोम में सही ढंग से नहीं दिखा था। position:relativeHTML पर ले जाया गया और height:100%इसके बजाय शरीर सेट करें min-height:100%।
संपादित करें 2: सीएसएस में अतिरिक्त टिप्पणियां जोड़ें। ऊपर कुछ और निर्देश जोड़े गए।
सीएसएस:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
HTML:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
क्यों?
html{min-height:100%;position:relative;}इसके बिना क्लाउड-कंटेनर DIV को HTML के लेआउट संदर्भ से हटा दिया जाता है। position: relativeयह सुनिश्चित करता है कि DIV HTML बॉक्स के अंदर रहता है जब इसे खींचा जाता है ताकि bottom:0HTML बॉक्स के निचले हिस्से को देखें। आप height:100%क्लाउड-कंटेनर पर भी उपयोग कर सकते हैं क्योंकि यह अब HTML टैग की ऊंचाई को दर्शाता है न कि व्यूपोर्ट को।
htmlतत्व पर न्यूनतम ऊंचाई (और न केवल ऊंचाई) का उपयोग करना होगा । ऐसा क्यों है?
heightकह रहा है 'तुम इस लम्बे हो; न कम और न ज्यादा।' जिसका मतलब है कि यह व्यूपोर्ट की ऊंचाई होगी। हम चाहते हैं कि यह कम से कम व्यूपोर्ट या लंबा हो। min-heightयह अच्छी तरह से करता है।
<html>और व्यूपोर्ट की स्थिति दो अलग चीजें थीं। धन्यवाद!
HTML5 के साथ, सबसे आसान तरीका बस करना है height: 100vh। जहां 'vh' ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई के लिए है। ब्राउज़र और मोबाइल उपकरणों के आकार के लिए उत्तरदायी।
vw।
मुझे एक समान समस्या थी और समाधान यह करना था:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
मैं एक पृष्ठ-केंद्रित div चाहता था जिसकी ऊँचाई पृष्ठ की ऊँचाई 100% हो, इसलिए मेरा कुल समाधान था:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
आपको एक मूल तत्व (या केवल 'शरीर') बनाने की आवश्यकता हो सकती है position: relative;
cloud-container?
आप अशुद्ध कॉलम का उपयोग करके धोखा दे सकते हैं या आप कुछ सीएसएस ट्रिकरी का उपयोग कर सकते हैं
यह तालिका का उपयोग करके सरल है:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>जब DIV पेश किया गया था, तो लोग तालिकाओं से इतना डरते थे कि गरीब DIV रूपक हथौड़ा बन गया।
स्थिति का पूर्ण उपयोग करें। ध्यान दें कि यह नहीं है कि हम आम तौर पर कैसे स्थिति का उपयोग करने के लिए उपयोग किए जाते हैं जो मैन्युअल रूप से चीजों को बिछाने या अस्थायी संवाद करने की आवश्यकता होती है। जब आप विंडो या सामग्री का आकार बदल लेंगे तो यह अपने आप खिंच जाएगा। मेरा मानना है कि इसके लिए मानक मोड की आवश्यकता है लेकिन IE6 और इसके बाद के संस्करण में काम करेगा।
बस अपनी सामग्री के साथ आईडी को cont thecontent ’के साथ बदलें (चित्रण के लिए निर्दिष्ट ऊँचाई है, आपको वास्तविक सामग्री पर ऊँचाई निर्दिष्ट करने की आवश्यकता नहीं है।
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>जिस तरह से यह काम करता है वह यह है कि बाहरी डिव नेव बार के लिए एक संदर्भ बिंदु के रूप में कार्य करता है। बाहरी div 'सामग्री' div की सामग्री से फैला है। नौसेना बार अपने माता-पिता की ऊंचाई तक खुद को फैलाने के लिए पूर्ण स्थिति का उपयोग करता है। क्षैतिज संरेखण के लिए हम सामग्री को स्वयं को नावबार की उसी चौड़ाई से ऑफसेट करते हैं।
यह CSS3 फ्लेक्स बॉक्स मॉडल के साथ बहुत आसान बना दिया गया है, लेकिन यह IE में अभी तक उपलब्ध नहीं है और इसमें से कुछ खुद के हैं।
मैं आपके समान समस्या में भाग गया। मैं एक DIVपृष्ठभूमि बनाना चाहता था , क्यों, क्योंकि जावास्क्रिप्ट के माध्यम से div में हेरफेर करना आसान है। वैसे भी तीन चीजें मैंने उस div के लिए css में कीं।
सीएसएस:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}यदि आप अधिक आधुनिक ब्राउज़रों को लक्षित कर रहे हैं, तो जीवन बहुत सरल हो सकता है। प्रयत्न:
.elem{
height: 100vh;
}यदि आपको पृष्ठ के 50% पर इसकी आवश्यकता है, तो 100 को 50 के साथ बदलें।
मैं एक मोडल पॉपअप को प्रॉम्प्ट करने से पहले पूरे वेब पेज को कवर करना चाहता हूं। मैंने CSS और Javascript का उपयोग करते हुए कई तरीके आज़माए लेकिन जब तक मैं निम्नलिखित समाधान नहीं निकालता, उनमें से कोई भी मदद नहीं करता। यह मेरे लिए काम करता है, मुझे आशा है कि यह आपकी भी मदद करता है।
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>सौभाग्य ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>सरल, बस इसे एक टेबल डिव में लपेटो ...
HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>सीएसएस:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>