सीएसएस flexbox: शीर्षलेख, मुख्य, पाद लेख लेआउट। मुख्य हिस्सा मध्य

में गिर मैं एक सरलतम स्थिति है साथसीएसएस flexbox: शीर्षलेख, मुख्य, पाद लेख लेआउट। मुख्य हिस्सा मध्य

<!DOCTYPE html> 
<html> 
<head> 
    <title>Whatever</title> 
</head> 

<body> 
<header></header> 
<main></main> 
<footer></footer> 
</body> 
</html>

तो मैं अपने हैडर का कहना है .. 15% होना चाहता हूँ, मेरे पाद लेख 5% और अपने मुख्य भाग में अंतरिक्ष के बाकी लेने मध्य। मैं इसे निश्चित स्थिति के साथ कर सकता हूं और यह सब कुछ लेकिन मैं फ्लेक्स बॉक्स को समझने की कोशिश कर रहा हूं। तो मेरे सभी प्रयास काम नहीं करते हैं। इस लेख के अनुसार: Flexbox layout मैं इसे के रूप में इस के रूप में सरल होना चाहिए:

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

body { 
    display: flex; 
    flex-direction: column; 
} 

header { 
    height: 75px; 
} 

main { 
    flex: auto; 
} 

footer { 
    height: 25px; 
}

... लेकिन यह सिर्फ काम नहीं करता। मैंने आकार को पिक्सेल से प्रतिशत में बदलने की कोशिश की - कोई किस्मत नहीं। मध्य भाग बस गिर जाता है और यह खिंचाव नहीं करता है।

मैंने Google हिट के पहले पृष्ठ के भीतर कुछ अन्य उदाहरणों की भी कोशिश की। कुछ भी काम नहीं करता है।

मैं क्या गलत कर रहा हूं। मैं फ्लेक्स बक्से के साथ उपरोक्त कैसे प्राप्त कर सकता हूं?

धन्यवाद।

पीएस लगभग भूल गया। मेरे ब्राउज़र, क्रोमियम 34.0.1847.116 (260972)

स्रोत

2014-04-27 r.sendecky

मैं आप कैसे जहां इस विधि से बाहर करने की कोशिश कर नहीं जानता है, लेकिन यह काम कर रहा है (अब कम से कम)।

Here's a JSFiddle showing the layout - मैंने खिंचाव को चित्रित करने के लिए एक सूक्ष्म पृष्ठभूमि रंग जोड़ा।

<header>header</header> 
<main>main</main> 
<footer>footer</footer> 

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

body { 
    display: flex; 
    flex-direction: column; 
} 

header { 
    height: 75px; 
} 

main { 
    flex: auto; 
    background-color: #ccc; 
} 

footer { 
    height: 25px; 
}

स्रोत

2014-06-05 16:40:51

-3

अंत यानी अपने पाद लेख टैग के बाद आप इस डाल सकते हैं जावास्क्रिप्ट कोड

<script> 
var header = document.getElementsByTagName("header")[0]; 
var main = document.getElementsByTagName("main")[0]; 
var footer = document.getElementsByTagName("footer")[0]; 

header.style.height=screen.height*0.15+"px"; 
main.style.height=screen.height*0.80+"px"; 
footer.style.height=screen.height*0.05+"px";  
</script>

स्रोत

2014-04-27 15:04:09 user3091574

धन्यवाद, लेकिन लक्ष्य फ्लेक्स बक्से के साथ यह करने के लिए है - जावास्क्रिप्ट, फिक्स्ड स्थिति या किसी अन्य साधन के साथ नहीं। या कम से कम, मुझे एक निश्चित उत्तर चाहिए कि फ्लेक्सबॉक्स लेआउट के साथ ऐसा करना संभव नहीं है। –

सीएसएस flexbox: शीर्षलेख, मुख्य, पाद लेख लेआउट। मुख्य हिस्सा मध्य

उत्तर

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