自己的总结的一些方法，如果有什么新的好的方法希望能够交流：
1.给定位(导航栏)(底部)
nav{
position:fixed;
top:0rem;
};
footer{
position:fixed;
bottom:0rem;
};
但是这个方法会有弊端，在你给nav设置定位时，内容区域就会顶头出现，就需要给内容区域设置定位设置top值nav的高度方可。
2.使用IScroll插件。
例如：
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
- 我是内容区域
3.第三那种弹性盒子：弊端(会改变nav的高度)；
< /title><br> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <br> <style type="text/css"><br> *{<br> margin: 0;<br> padding: 0;<br> }<br> body,html,.wrap{<br> Breite: 100 %;<br> Höhe: 100 %;<br> Überlauf: versteckt;<br> Anzeige: Flex;<br> Flex-Grow: 1;<br> Flex-Richtung: Spalte;<br> } <br> .box{<br> width: 100 %;<br> overflow: auto;<br> }<br> nav{<br> width: 100 %;<br> height: 3rem;<br> line- Höhe: 3rem;<br> Hintergrund: Schwarz;<br> Farbe: Weiß;<br> Schriftstärke: Fett;<br> Textausrichtung: Mitte;<br> }<br> Fußzeile{<br> Text- ausrichten: zentriert;<br> Breite: 100 %;<br> Höhe: 3rem;<br> Zeilenhöhe: 3rem;<br> Farbe: weiß;<br> Schriftstärke: fett;<br> Hintergrund: Schamottstein ;<br> }<br> .box ul li{<br> width: 100%;<br> height: 5rem;<br> line-height: 5rem;<br> }<br> </style><br> </head><br> <body><br> <div class="wrap"><br> <nav>头部</nav><br> <div class=" box"><br> <ul><br> <li>内容区域</li><br> <li>内容区域</li><br> <li>内容区域< /li><br> <li>内容区域</li><br> <li>内容区域</li><br> <li>内容区域</li><br> < li & gt; 内容 区域 & lt;/li & gt; <br> & lt; li & gt; ;<br> <li>内容区域</li><br> <li>内容区域</li><br> </ul><br> </div><br> < footer>底部</footer><br> </div><br> </body><br></html><br><br> </p>
<p style="margin-left: 60px">如果还有其他好的方法，希望能一起交流；</p><p>Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum Scrollen des Inhaltsbereichs auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen" href="http://m.php.cn/de/faq/368270.html">Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen</a></span><span>Nächster Artikel：<a class="dBlack" title="Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen" href="http://m.php.cn/de/faq/368272.html">Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
