एक निश्चित साइडबार टेम्पलेट मुद्दों को लागू करना - जावास्क्रिप्ट, jquery, एचटीएमएल, सीएसएस, साइडबार

मैं इस विषय का अनुकरण करने की कोशिश कर रहा हूँ:

http://themetrust.com/demos/ink/?project=the-city-of-samba

लेकिन इसके बजाय ब्लॉग पोस्ट हमेशा दायीं तरफ (निश्चित साइडबार के बाहर की जगह) में केंद्रित रहें और ब्लॉग पोस्ट को% चौड़ाई का होना चाहिए।

मैं वर्तमान में यह मेरी साइट पर स्थापित है, लेकिन एक प्रतिशत आधारित साइडबार का उपयोग कर रहा हूँ जो भयानक लग रहा है।

मूलभूत शर्तों में उपरोक्त विषय में एक JSfiddle पुनर्निर्माण यहां दिया गया है:

http://jsfiddle.net/Uyv6w/4/

मैं उसके बाद हूं कि ग्रे ग्रेर div हमेशा लाल सामग्री div के अंदर केंद्रित रहता है।

जेएसफ़िल्ड नीचे उतरे और भविष्य के लिए रेफरी:

HTML:

<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>

सीएसएस:

* {
margin: 0; padding: 0;
}

html, body {
width: 100%;
height: 100%;
background-color: #333;
}

#container {
height: 100%;
width: 100%;
}

#sidebar {
height: 100%;
width: 100px;
background-color: #9b59b6;
position: fixed;
}

#content {
width: 100%;
background-color: #f00;
}

#inner {
width: 60%;
margin-left: 150px;
background-color: #888;
height: 1000px;
}

धन्यवाद।

उत्तर:

उत्तर № 1 के लिए 1

इस काम को जिस तरह से आप चाहते हैं उसे बनाने के लिए केवल 2 गुणों को बदलने के लिए हैं:

#content {
/* width: 100%; */
margin-left: 100px; /* the width of you sidebar.
Since #content is a div, a block-level element
, its width will be automatically 100%
, minus the margins */
background-color: #f00;
}

#inner {
width: 60%;
/* margin-left: 150px; */
margin-left: auto;
margin-right: auto; /* having margin-left & right set to auto will center your div.
you could also use "margin: 0 auto" */
background-color: #888;
height: 1000px;
}

मैंने आपको JSFiddle उदाहरण अपडेट किया है: http://jsfiddle.net/Uyv6w/5/


जवाब के लिए 0 № 2

http://jsbin.com/requv/1/edit

यदि आप बॉडी, एचटीएमएल (और कंटेनर) 100% ऊंचाई पर सेट करते हैं, तो यह स्क्रॉल करने में सक्षम नहीं होगा। ऊंचाई 100% अधिक होना चाहिए।


संबंधित सवाल
सबसे लोकप्रिय