पूर्ण स्क्रीन div कि ब्राउज़र के आकार

फिट बैठता है मैं इस तरह div और सीएसएस के साथ एक HTML दस्तावेज़ है:पूर्ण स्क्रीन div कि ब्राउज़र के आकार

<html> 
<head> 
    <title></title> 
    <style text="text/javascript"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</body> 
</html>

मेनू तय हो गई है, behindMenu मेनू के रूप में एक ही आकार है और यह मेनू के पीछे है। तब मेरे पास कक्षा पूर्ण के साथ लोगो और div है। कक्षा सामग्री के साथ पूर्ण div के बाद।

जब उस पृष्ठ पर जाएं, तो मैं चाहता हूं कि div पूर्ण लोगो के आकार और आकार के बीच आकार (आकार) होगा। इसलिए जब मैं खिड़की का आकार बदलता हूं, तो पूर्ण रूप से ब्राउजर आकार के लोगो और नीचे के बीच की ऊंचाई होनी चाहिए। स्क्रॉल करते समय उपयोगकर्ता शेष सामग्री देखेंगे।

कुछ इस तरह: http://strobedigital.com/

यहाँ बेला है: http://jsfiddle.net/2963C/

स्रोत

2013-08-07 repincln

एचटीएमएल

<html> 
<head> 
    <title></title> 
    <style text="text/css"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</div> 
</body> 
</html>

सीएसएस

html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

स्रोत

2013-08-07 07:33:34 Anon

धन्यवाद। यह एक संशोधन के साथ ठीक काम करता है। मेन्यू, पीछे मेनू और लोगो को पूर्ण div के तहत होना चाहिए। आपका बहुत बहुत धन्यवाद। – repincln

यह काम नहीं करता है अगर .full के तहत सामग्री .full से अधिक है तो आपको स्थिति का उपयोग करना होगा: निश्चित; – Macbric

.full { min-height: 100%; height:auto;}

स्रोत

2013-08-07 06:52:16 ParVathi

यह काम नहीं करता ... – repincln

<html> 
<head> 
    <style text="text/javascript"> 
    html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; left:0; width:100%; min-height:100%;} 
.menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
.behindMenu { height: 50px; width: 100%; } 
.logo {width: 100%; height: 150px;} 
.content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
</div> 
    <div class="content">The rest content</div> 
</body> 
</html>

यहाँ वहाँ एक सरल उपाय सभी आधुनिक ब्राउज़रों द्वारा समर्थित है समाधान- http://jsfiddle.net/agrawal_rupesh/b7gwK/

स्रोत

2013-08-07 08:08:48 Rupesh

यह समाधान अच्छा नहीं है, क्योंकि सामग्री पूर्ण div के बाद नहीं है। यह उस div के पीछे है। – repincln

साथ बेला है।

div#full { 
    height: 100vh; 
}

एकमात्र उल्लेखनीय अपवाद 4.3 से नीचे एंड्रॉइड है - लेकिन केवल सिस्टम ब्राउज़र में (क्रोम ठीक काम करता है)।

ब्राउज़र समर्थन चार्ट: http://caniuse.com/viewport-units

स्रोत

2014-05-22 11:09:53

वाह! स्वीकृत उत्तर से बेहतर! सरल लेकिन काम करना! धन्यवाद! –

बहुत बढ़िया, बस कोशिश की गई –

** 100vh ** पुराने वेबव्यू कार्यान्वयन – EpicPandaForce

दुर्भाग्य vh और vw iPhone के साथ बहुत गाड़ी लेकिन लगभग सभी ब्राउज़रों (जिस तरह से वापस जा रहा) खुश आप के लिए कुछ गणित कर रहा है:

html,body { 
    height:100%; 
    margin:0; 
} 

.full { 
    height: calc(100% - 50px); /* Minus menu height */ 
    min-height: calc(100% - 50px);/*for Mozilla */ 
} 

html>body .full { 
    height:auto; 
}

स्रोत

पूर्ण स्क्रीन div कि ब्राउज़र के आकार

उत्तर

संबंधित मुद्दे