7
मैं इस कोड है:पाद, लेकिन नहीं चल मध्य हवा यदि पर्याप्त सामग्री नहीं
डेमो: http://jsfiddle.net/z21nz89d/2/
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>Some footer-content</p>
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
<div class="col-md-4">
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
</div>
</div>
</footer>
सीएसएस:
footer {
background-color: #eee;
padding-top: 15px;
padding-left: 15px;
}
यह मेरे पास बहुत ही बुनियादी बात है, लेकिन आपको बिंदु मिलेगा। जैसा कि आप देख सकते हैं कि पाद लेख कहीं मध्य हवा में स्थित है। मैं इसे पूर्ण स्थिति में रख सकता हूं और इसे आसानी से चिपचिपा बना सकता हूं, लेकिन कई कारणों से मुझे वह नहीं चाहिए।
मैं पाद लेख पूरी सामग्री नीचे होना चाहता हूँ (हां, तो बात करने के लिए बहुत पिछले के रूप में सूचीबद्ध), तथापि, वहाँ पर्याप्त सामग्री मैं पाद लेख नीचे रखा होने की जरूरत नहीं है कि अगर: 0 और छोड़ दिया: 0.
मुझे नहीं पता कि इसे कैसे पूरा किया जाए। मेरा पहला अनुमान यह देखने के लिए जावास्क्रिप्ट का उपयोग करना होगा कि साइट कितनी जगह है और क्या साइट स्क्रॉल करने योग्य है या नहीं।
जो आप समझा रहे हैं वह एक चिपचिपा पाद लेख है। बिल्कुल यकीन नहीं है कि आप क्या चाहते हैं। चिपचिपा पाद लेख सामग्री के निचले हिस्से में पाद लेख रखता है जब तक कि खिड़की की ऊंचाई को भरने के लिए पर्याप्त सामग्री न हो; तो यह नीचे रखा गया है: 0, बाएं: 0. –
तब मुझे वास्तव में काम करने में समस्या होने लगती है जैसा लगता है। –