सीएसएस का उपयोग करके इस शीर्षलेख/सामग्री/पाद लेख लेआउट को कैसे बनाया जाए?

______________________ 
|  Header  | 
|______________________| 
|      | 
|      | 
|  Content  | 
|      | 
|      | 
|______________________| 
|  Footer  | 
|______________________|

मैं यह यूआई बनाना चाहता हूं, और प्रत्येक एक div है। हेडर ऊंचाई 30px है। और पाद लेख 30 पीएक्स है। लेकिन मुझे सामग्री की ऊंचाई नहीं पता है। मुझे गणना करने के लिए उपयोगकर्ता फ्रेम का उपयोग करने की आवश्यकता है।सीएसएस का उपयोग करके इस शीर्षलेख/सामग्री/पाद लेख लेआउट को कैसे बनाया जाए?

कुल ऊंचाई 100% होना चाहिए।

क्या मैं इसे शुद्ध सीएसएस में कर सकता हूं?

शीर्ष लेख और पाद 30px ऊंचाई हैं:

स्रोत

2011-08-19 DNB5brims

क्या डाउनवॉटर अपने डाउनवॉट्स को समझा सकते हैं? मुझे सीएसएस नहीं पता, इसलिए यह मेरे लिए एक पूरी तरह से क्रांतिकारी सवाल की तरह दिखता है। –

मुझे यकीन है कि डाउनवॉट ओपी के हिस्से पर कथित प्रयास की कमी के कारण हैं, जो पूरी तरह से कानूनी है। –

यह एक बिल्कुल मान्य सवाल है। यह अभी भी एक दर्द है और सीएसएस के साथ सहज नहीं है। – Glenn

flexbox का उपयोग करना, इस लक्ष्य को हासिल करने के लिए आसान है।

display: flex; पर अपने 3 डिब्बों वाले रैपर को सेट करें और इसे 100% या 100vh की ऊंचाई दें। रैपर की ऊंचाई पूरी ऊंचाई को भर देगी, और display: flex; इस रैपर के सभी बच्चों को फ्लेक्सबॉक्स-जादू के साथ नियंत्रित करने के लिए उपयुक्त फ्लेक्स-गुण (उदाहरण के लिए flex:1;) का कारण बन जाएगा।

उदाहरण मार्कअप:

<div class="wrapper"> 
    <header>I'm a 30px tall header</header> 
    <main>I'm the main-content filling the void!</main> 
    <footer>I'm a 30px tall footer</footer> 
</div>

और सीएसएस यह साथ देने के लिए:

.wrapper { 
    height: 100vh; 
    display: flex; 

    /* Direction of the items, can be row or column */ 
    flex-direction: column; 
} 

header, 
footer { 
    height: 30px; 
} 

main { 
    flex: 1; 
}

यहाँ कि कोड है Codepen पर रहते हैं: http://codepen.io/enjikaka/pen/zxdYjX/left

आप अधिक flexbox-जादू यहाँ देख सकते हैं: http://philipwalton.github.io/solved-by-flexbox/

या एक अच्छी तरह से प्रलेखन दस्तावेज खोजें पुन: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

- [ओल्ड जवाब नीचे] -

ये रहा: http://jsfiddle.net/pKvxN/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Layout</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    header { 
    height: 30px; 
    background: green; 
    } 
    footer { 
    height: 30px; 
    background: red; 
    } 
</style> 
</head> 
<body> 
    <header> 
    <h1>I am a header</h1> 
    </header> 
    <article> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor. 
    </p> 
    </article> 
    <footer> 
    <h4>I am a footer</h4> 
    </footer> 
</body> 
</html>

कि सभी आधुनिक ब्राउज़रों (FF4 +, क्रोम, सफारी, IE8 और IE9 पर काम करता है +)

स्रोत

2011-08-19 14:43:26

लेकिन मैं पाद लेख स्क्रीन स्क्रीन पर कैसे टिक सकता हूं? – DNB5brims

लेकिन जब लेख बहुत लंबा हो जाता है, तो स्क्रीन के बाहर पाद लेख, और मुझे नीचे स्क्रॉल करने की आवश्यकता है .... मैं इसके बजाय नीचे चिपकना चाहता हूं। – DNB5brims

http://jsfiddle.net/UpHtc/ | http://jsfiddle.net/SSeQk/ कुछ –

यहाँ कैसे है कि करने के लिए है।

पाद लेख पृष्ठ के नीचे फंस गया है।

HTML:

<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div>

सीएसएस:

#header { 
    height: 30px; 
} 
#footer { 
    height: 30px; 
    position: absolute; 
    bottom: 0; 
} 
body { 
    height: 100%; 
    margin-bottom: 30px; 
}

jsfiddle पर यह प्रयास करें: http://jsfiddle.net/Usbuw/

स्रोत

2011-08-19 14:38:21 arnaud576875

+1 अच्छा काम :) अच्छा और आसान – walialu

+10

यह सामग्री काम नहीं करती है यदि सामग्री स्क्रीन ऊंचाई से अधिक है। फिर पाद लेख सामग्री को ओवरलैप कर देगा और सामग्री पाद लेख के बाद जारी रहेगी। – acme

प्रयास करें इस

सीएसएस

.header{ 
    height:30px; 
} 
.Content{ 
    height: 100%; 
    overflow: auto; 
    padding-top: 10px; 
    padding-bottom: 40px; 
} 
.Footer{ 
    position: relative; 
    margin-top: -30px; /* negative value of footer height */ 
    height: 30px; 
    clear:both; 
}

एचटीएमएल

<body> 
    <div class="Header">Header</div> 
    <div class="Content">Content</div> 
    <div class="Footer">Footer</div> 
    </body>

स्रोत

2011-08-19 14:56:16 atrueresistance

काम नहीं करता है। इस तरह से "सामग्री" की ऊंचाई कभी 100% नहीं होगी। –

उत्तर की तारीख को देखो। 2011 से ब्राउज़र बदल गए हैं। – atrueresistance

हां, यह आपकी गलती नहीं है, लेकिन यह उन लोगों के लिए बेहतर चेतावनी दी जाएगी जो मेरे जैसे कोड का उपयोग करना चाहते थे। :) –

थोड़ी देर के चारों ओर नगण्य के बाद मैं एक समाधान है कि में काम करता है> IE7, क्रोम, फायरफॉक्स पाया:

http://jsfiddle.net/xfXaw/

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height:100%; 
} 

#wrap { 
    min-height:100%; 

} 

#header { 
    background: red; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
    height:50px; 
    margin-top:-50px; 
    background: green; 
}

HTML:

<div id="wrap"> 
    <div id="header">header</div> 
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div> 
</div> 
<div id="footer">footer</div>

स्रोत

2013-10-18 13:54:00 acme

यह

<!DOCTYPE html> 

<html> 

<head> 

<title>Sticky Header and Footer</title> 

<style type="text/css"> 

/* Reset body padding and margins */ 

body { 
    margin:0; 

    padding:0; 
} 

/* Make Header Sticky */ 

#header_container { 

    background:#eee; 

    border:1px solid #666; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 

    top:0; 
} 

#header { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 
} 

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/ 

#container { 

    margin:0 auto; 

    overflow:auto; 

    padding:80px 0; 

    width:940px; 

} 

#content { 

} 

/* Make Footer Sticky */ 

#footer_container { 

    background:#eee; 

    border:1px solid #666; 

    bottom:0; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 
} 

#footer { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 

} 

</style> 

</head> 

<body> 

<!-- BEGIN: Sticky Header --> 
<div id="header_container"> 

    <div id="header"> 
     Header Content 
    </div> 

</div> 
<!-- END: Sticky Header --> 

<!-- BEGIN: Page Content --> 
<div id="container"> 

    <div id="content"> 

      content 
     <br /><br /> 
      blah blah blah.. 
     ... 
    </div> 

</div> 
<!-- END: Page Content --> 

<!-- BEGIN: Sticky Footer --> 
<div id="footer_container"> 

    <div id="footer"> 

     Footer Content 

    </div> 

</div> 

<!-- END: Sticky Footer --> 

</body> 

</html>

स्रोत

2013-10-24 05:43:48 Anand

सीएसएस का उपयोग करके इस शीर्षलेख/सामग्री/पाद लेख लेआउट को कैसे बनाया जाए?

उत्तर

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