सीएसएस लेआउट सहायता - पेज

Question

के नीचे div को खींचें मैं एक 'हेडर' क्षेत्र के साथ एक लेआउट बनाने की कोशिश कर रहा हूं जिसमें लोगो और कुछ लिंक हैं, और फिर एक सामग्री क्षेत्र जिसे पृष्ठ के नीचे तक विस्तारित करने की आवश्यकता है । यह वह जगह है जहां मैं फंस रहा हूं।

मैंने हेडर और सामग्री को एक कंटेनर div से घिरा हुआ है जिसमें 100% की ऊंचाई है, यह ठीक काम करता है। लेकिन मैं सामग्री div को कंटेनर div के नीचे तक खींचने के लिए नहीं प्राप्त कर सकता क्योंकि यह पृष्ठ शरीर से ऊंचाई लेने के लिए 100% की न्यूनतम ऊंचाई देता है, इसलिए मैं अंतरिक्ष के कारण स्क्रॉल बार के साथ समाप्त होता हूं शीर्षलेख द्वारा पृष्ठ के शीर्ष पर लिया गया।

यहाँ एक wireframe है जो उम्मीद है कि मैं क्या एक सा साफ प्राप्त करने के लिए कोशिश कर रहा हूँ बनाता है ...

यहां एक त्वरित सीएसएस उदाहरण है, यह काम करता है, वहाँ हमेशा कम एक स्क्रॉलबार किया जा रहा से अलग जो हेडर क्षेत्र की ऊंचाई प्रतीत होता है ...

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
body { 
    background-color: #000; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    min-height: 100%; 
} 
#header { 
    padding-top: 26px; 
} 
#logo { 
    width: 194px; 
    height: 55px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#content { 
    margin-top: 10px; 
    position: absolute; 
    width: 1000px; 
    min-height: 100%; 
    background-color: #fff; 
} 

Answer 1

कंटेनर div स्थिति बनाएं: सापेक्ष और सामग्री div स्थिति: पूर्ण। < हैडर ऊंचाई > और नीचे:: फिर सामग्री div शीर्ष देना 0

की स्थिति अब यह अधिकार का परीक्षण करने में नहीं

, लेकिन मुझे लगता है कि कुछ इस तरह काम करना चाहिए।

Answer 2

http://jsfiddle.net/CZayc/

यह एक div में शीर्षक और शरीर लपेटकर पाद लेख पुश करने के लिए नीचे

index.html

<div id="wrap"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     main<br/>main<br/>main<br/>main<br/>main<br/>main<br/> 
    </div> 
</div> 
<div id="footer"> 
    footer 
</div> 

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    border-top:20px solid #fff; 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
} 

Answer 3

सीमाओं से काम करता है: शीर्षलेख ऊंचाई स्थिर होना चाहिए, एक के साथ bsolute ऊंचाई।

सामग्री ऊंचाई गतिशील है।

सीएसएस कोड:

* { 
    padding:0; 
    margin:0; 
} 
html, body { 
    height: 100%; 
    color: #fff; 
} 
#header { 
    background: red; 
    position: absolute; 
    z-index:20; 
    height: 7em; 
    overflow:hidden; 
    width:100%; 
} 
#content { 
    background: blue; 
    position: absolute; 
    top: 0; 
    padding-top: 7em; 
    min-height: 100%; 
    box-sizing: border-box; 
} 

सामग्री नीचे करने के लिए सभी तरह से खिंचाव, तब भी जब पाठ छोटा है। -

जब सामग्री के पाठ हमारी खिड़की ऊंचाई से अधिक लंबी है हम ऑटो स्क्रॉल

उदाहरण मिलता है: http://jsfiddle.net/fixit/p3B4s/3/