当前位置：极客教程 > CSS > CSS 问答 > CSS 实现 < textarea> 充满剩余的高度

CSS 实现 < textarea> 充满剩余的高度

CSS 实现充满剩余的高度</h1> <p>在本文中，我们将介绍如何使用CSS来实现让一个<textarea>元素填充其所在容器剩余的高度。这是一个常见的需求，例如在一个自适应布局中，希望让<textarea>元素自动适应剩余的空间。</p> <p><strong>阅读更多：<a class="wp-editor-md-post-content-link" href="https://geek-docs.com/css">CSS 教程</a></strong></p> <h2>使用flex布局</h2> <p>一种实现让<textarea>填充剩余高度的方法是使用flex布局。可以通过将容器元素的display属性设置为flex，并设置相关的flex属性来实现：</p><div id="eaa_after_nth_p" class="eaa-wrapper eaa_after_nth_p eaa_desktop"><div class="eaa-ad " style=""><div class="aligncenter" style="max-width:336px;"> <ins class="adsbygoogle adsbygoogle-dis" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="6101954166"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div></div> <pre><code class="language-css line-numbers">.container { display: flex; flex-direction: column; } .textarea { flex: 1; } </code></pre> <p>在上面的示例中，我们将容器元素的display属性设置为flex，这样该容器就成为了一个flex容器。然后，通过设置容器元素的flex-direction属性为column，让其中的元素垂直排列。最后，在<textarea>元素上设置flex属性为1，表示让它占据剩余的空间。</p> <h2>使用calc函数计算高度</h2> <p>除了使用flex布局，我们还可以使用calc()函数来计算<textarea>元素的高度。calc()函数允许我们在CSS中进行简单的计算。</p> <pre><code class="language-css line-numbers">.container { height: 100%; padding-bottom: 20px; /* 为了避免贴近底部 / } .textarea { height: calc(100% - 20px); width: 100%; } </code></pre> <p>在上面的示例中，我们首先为容器元素设置了一个百分比的高度，这样它就能够相对于父容器进行自适应。然后，通过为容器元素设置padding-bottom属性来避免<textarea>元素贴近底部。最后，我们使用calc函数计算<textarea>元素的高度为容器元素的百分比高度减去一个固定的像素值。</p> <h2>使用grid布局</h2> <p>另一种实现让<textarea>填充剩余高度的方法是使用grid布局。通过将容器元素的display属性设置为grid，并设置相关的grid属性来实现：</p> <pre><code class="language-css line-numbers">.container { display: grid; grid-template-rows: 1fr; } .textarea { grid-row: 1 / span 1; } </code></pre> <p>在上面的示例中，我们将容器元素的display属性设置为grid，这样该容器就成为了一个grid容器。然后，通过设置容器元素的grid-template-rows属性为1fr，表示让该容器只有一行，并且占据剩余的空间。最后，在<textarea>元素上设置grid-row属性为1 / span 1，表示将它放在第一行并且占据一行的空间。</p> <h2>使用绝对定位</h2> <p>最后，我们还可以使用绝对定位的方式来让<textarea>填充剩余高度。通过将容器元素设置为相对定位，而<textarea>元素设置为绝对定位，并设置top和bottom属性来实现：</p><div id="eaa_after_nth_p_1" class="eaa-wrapper eaa_after_nth_p_1 eaa_desktop"><div class="eaa-ad " style=""><div class="inarticle2-top" style="height:350px;"> <div class="aligncenter div-process-inarticle2-3" wwadsclass="wwads-cn wwads-vertical" wwadsadid="297" style="display:none !important;max-width:336px;margin:auto;"></div> <div class="aligncenter div-process-inarticle2-2" adsenseclass="adsbygoogle process-inarticle2-2" adsenseslot="6416505003" adsenseslayoutkey="-ej+6y-29-jf+173" style="display:none !important;"></div> <div class="aligncenter" style="max-width:336px;"> <ins class="adsbygoogle process-inarticle2-1" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="5308655082"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div></div> <pre><code class="language-css line-numbers">.container { position: relative; height: 100%; } .textarea { position: absolute; top: 0; bottom: 0; width: 100%; } </code></pre> <p>在上面的示例中，我们首先为容器元素设置position属性为relative，这样它就成为了一个相对定位的容器。然后，我们为<textarea>元素设置position属性为absolute，并将top属性设置为0，bottom属性设置为0，这样它就会相对于容器元素的顶部和底部进行绝对定位。</p> <h2>总结</h2> <p>通过使用flex布局、calc函数、grid布局和绝对定位等方法，我们可以轻松地实现让<textarea>元素填充其所在容器剩余的高度。根据具体的布局需求和兼容性要求，我们可以选择合适的方法来实现这一效果。希望本文的内容对你有所帮助！</p> </p><div id="eaa_post_after_content" class="eaa-wrapper eaa_post_after_content eaa_desktop"><div class="eaa-ad " style=""><div class="wwads-cn wwads-vertical" data-id="297" style="margin:auto;"></div></div></div> </article>  <nav class="article-nav"> <span class="article-nav-prev" style="float:left;text-align:left">上一篇 <a href="https://geek-docs.com/css/css-ask-answer/665_css_how_to_give_focus_to_anchor_tag_without_href.html" rel="prev">CSS 如何给没有 href=”#” 的锚点元素设置焦点</a></span> <span class="article-nav-next">下一篇 <a href="https://geek-docs.com/css/css-ask-answer/689_css_select_menu_option_border_none.html" rel="next">CSS 选择菜单选项边框消除</a></span> </nav> <div style="width:100%;margin: auto;"> <form method="get" class="site-search-form-2" action="https://zhannei.baidu.com/cse/site" target="_blank"> <input type="hidden" name="cc" value="geek-docs.com"> <input type="hidden" name="ie" value="utf8"> <input class="search-input" name="q" value="" type="text" placeholder="输入关键字" value=""> <button class="search-btn" type="submit"><i class="fa fa-search"></i></button> </form> </div> <fieldset class="gra1"> <h2>Python教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/python/python-top-tutorials/1000100_python_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/python.png" alt="Python 教程" src="https://static.deepinout.com/homeicon/python.png"> <p>Python 教程</p> </div> </a> <a href="https://geek-docs.com/tkinter/tkinter-top-articles/1188100_python_gui_programming.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/tkinter.png" alt="Tkinter 教程" src="https://static.deepinout.com/homeicon/tkinter.png"> <p>Tkinter 教程</p> </div> </a> <a href="https://geek-docs.com/pandas/pandas-top-articles/1000100_python_pandas_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pandas.png" alt="Pandas 教程" src="https://static.deepinout.com/homeicon/pandas.png"> <p>Pandas 教程</p> </div> </a> <a href="https://geek-docs.com/numpy/numpy-top-tutorials/1000100_numpy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/numpy.png" alt="NumPy 教程" src="https://static.deepinout.com/homeicon/numpy.png"> <p>NumPy 教程</p> </div> </a> <a href="https://geek-docs.com/flask/flask-top-articles/1001100_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/flask.png" alt="Flask 教程" src="https://static.deepinout.com/homeicon/flask.png"> <p>Flask 教程</p> </div> </a> <a href="https://geek-docs.com/django/django-top-articles/1000100_django_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/django.png" alt="Django 教程" src="https://static.deepinout.com/homeicon/django.png"> <p>Django 教程</p> </div> </a> <a href="https://geek-docs.com/pyspark-docs/pyspark-top-tutorials/1000100_pyspark_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyspark.png" alt="PySpark 教程" src="https://static.deepinout.com/homeicon/pyspark.png"> <p>PySpark 教程</p> </div> </a> <a href="https://geek-docs.com/wxpyhon/wxpython-top-tutorials/1000100_wxpython_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/wxpython.png" alt="wxPython 教程" src="https://static.deepinout.com/homeicon/wxpython.png"> <p>wxPython 教程</p> </div> </a> <a href="https://geek-docs.com/sympy/sympy-top-tutorials/1000100_sympy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sympy.png" alt="SymPy 教程" src="https://static.deepinout.com/homeicon/sympy.png"> <p>SymPy 教程</p> </div> </a> <a href="https://geek-docs.com/seaborn/seaborn-top-tutorials/1000100_seaborn_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/seaborn.png" alt="Seaborn 教程" src="https://static.deepinout.com/homeicon/seaborn.png"> <p>Seaborn 教程</p> </div> </a> <a href="https://geek-docs.com/scipy/scipy-top-tutorials/1000100_scipy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/scipy.png" alt="SciPy 教程" src="https://static.deepinout.com/homeicon/scipy.png"> <p>SciPy 教程</p> </div> </a> <a href="https://geek-docs.com/rxry-new/rxpy-top-tutorials/1000100_rxpy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/rxpy.png" alt="RxPY 教程" src="https://static.deepinout.com/homeicon/rxpy.png"> <p>RxPY 教程</p> </div> </a> <a href="https://geek-docs.com/pycharm/pycharm-top-tutorials/1000100_pycharm_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pycharm.png" alt="Pycharm 教程" src="https://static.deepinout.com/homeicon/pycharm.png"> <p>Pycharm 教程</p> </div> </a> <a href="https://geek-docs.com/pygame/pygame-top-tutorials/1000100_pygame_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pygame.png" alt="Pygame 教程" src="https://static.deepinout.com/homeicon/pygame.png"> <p>Pygame 教程</p> </div> </a> <a href="https://geek-docs.com/pygtk/pygtk-top-tutorials/1000100_pygtk_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pygtk.png" alt="PyGTK 教程" src="https://static.deepinout.com/homeicon/pygtk.png"> <p>PyGTK 教程</p> </div> </a> <a href="https://geek-docs.com/pyqt/pyqt-top-tutorials/1000100_pyqt_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyqt.png" alt="PyQt 教程" src="https://static.deepinout.com/homeicon/pyqt.png"> <p>PyQt 教程</p> </div> </a> <a href="https://geek-docs.com/pyqt5/pyqt5-top-tutorials/1000100_pyqt5_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyqt5.png" alt="PyQt5 教程" src="https://static.deepinout.com/homeicon/pyqt5.png"> <p>PyQt5 教程</p> </div> </a> <a href="https://geek-docs.com/pytorch/pytorch-top-tutorials/1000100_pytorch_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pytorch.png" alt="PyTorch 教程" src="https://static.deepinout.com/homeicon/pytorch.png"> <p>PyTorch 教程</p> </div> </a> <a href="https://geek-docs.com/matplotlib/matplotlib-top-tutorials/1000100_matplotlib_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/matplotlib.png" alt="Matplotlib 教程" src="https://static.deepinout.com/homeicon/matplotlib.png"> <p>Matplotlib 教程</p> </div> </a> <a href="https://geek-docs.com/web2py/web2py-top-tutorials/1000100_web2py_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/web2py.png" alt="Web2py 教程" src="https://static.deepinout.com/homeicon/web2py.png"> <p>Web2py 教程</p> </div> </a> <a href="https://geek-docs.com/beautifulsoup/beautiful-soup-top-tutorials/1000100_beautiful_soup_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/beautiful_soup.png" alt="BeautifulSoup 教程" src="https://static.deepinout.com/homeicon/beautiful_soup.png"> <p>BeautifulSoup 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>Java教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/java/java-top-tutorials/1001100_java_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/java.png" alt="Java 教程" src="https://static.deepinout.com/homeicon/java.png"> <p>Java 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>Web教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/html.png" alt="HTML 教程" src="https://static.deepinout.com/homeicon/html.png"> <p>HTML 教程</p> </div> </a> <a href="https://geek-docs.com/css/css-top-articles/1000100_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/css.png" alt="CSS 教程" src="https://static.deepinout.com/homeicon/css.png"> <p>CSS 教程</p> </div> </a> <a href="https://geek-docs.com/css3/css3-top-articles/1061100_css3_tutorial.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/css3.jpg" alt="CSS3 教程" src="https://static.deepinout.com/homeicon/css3.jpg"> <p>CSS3 教程</p> </div> </a> <a href="https://geek-docs.com/jquery/jquery-top-tutorials/1001100_jquery-index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/jquery.png" alt="jQuery 教程" src="https://static.deepinout.com/homeicon/jquery.png"> <p>jQuery 教程</p> </div> </a> <a href="https://geek-docs.com/ajax/ajax-top-tutorials/1000100_ajax_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/ajax.png" alt="Ajax 教程" src="https://static.deepinout.com/homeicon/ajax.png"> <p>Ajax 教程</p> </div> </a> <a href="https://geek-docs.com/angularjs/angularjs-top-tutorials/1001100_angularjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/angularjs.png" alt="AngularJS 教程" src="https://static.deepinout.com/homeicon/angularjs.png"> <p>AngularJS 教程</p> </div> </a> <a href="https://geek-docs.com/typescript/typescript-top-tutorials/1000100_typescript_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/typescript.png" alt="TypeScript 教程" src="https://static.deepinout.com/homeicon/typescript.png"> <p>TypeScript 教程</p> </div> </a> <a href="https://geek-docs.com/wordpress/wordpress-top-tutorials/1001100_wordpress_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/wordpress.png" alt="WordPress 教程" src="https://static.deepinout.com/homeicon/wordpress.png"> <p>WordPress 教程</p> </div> </a> <a href="https://geek-docs.com/laravel/laravel-top-tutorials/1000100_laravel_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/laravel-home.png" alt="Laravel 教程" src="https://static.deepinout.com/homeicon/laravel-home.png"> <p>Laravel 教程</p> </div> </a> <a href="https://geek-docs.com/next-js/nextjs-top-tutorials/1000100_nextjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/nextjs.png" alt="Next.js 教程" src="https://static.deepinout.com/homeicon/nextjs.png"> <p>Next.js 教程</p> </div> </a> <a href="https://geek-docs.com/phantomjs/phantomjs-top-tutorials/1000100_phantomjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/phantomjs.png" alt="PhantomJS 教程" src="https://static.deepinout.com/homeicon/phantomjs.png"> <p>PhantomJS 教程</p> </div> </a> <a href="https://geek-docs.com/three-js/three-js-top-tutorials/1000100_threejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/threejs.png" alt="Three.js 教程" src="https://static.deepinout.com/homeicon/threejs.png"> <p>Three.js 教程</p> </div> </a> <a href="https://geek-docs.com/underscorejs/underscorejs-top-tutorials/1000100_underscorejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/underscorejs.png" alt="Underscore.JS 教程" src="https://static.deepinout.com/homeicon/underscorejs.png"> <p>Underscore.JS 教程</p> </div> </a> <a href="https://geek-docs.com/webgl/webgl-top-tutorials/1000100_webgl_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/webgl.png" alt="WebGL 教程" src="https://static.deepinout.com/homeicon/webgl.png"> <p>WebGL 教程</p> </div> </a> <a href="https://geek-docs.com/webrtc/webrtc-top-tutorials/1000100_webrtc_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/webrtc.png" alt="WebRTC 教程" src="https://static.deepinout.com/homeicon/webrtc.png"> <p>WebRTC 教程</p> </div> </a> <a href="https://geek-docs.com/vuejs/vue-js-top-tutorials/1000100_vuejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vue-js-home.png" alt="VueJS 教程" src="https://static.deepinout.com/homeicon/vue-js-home.png"> <p>VueJS 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>数据库教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/sql/sql-top-tutorials/1000100_sql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sql.png" alt="SQL 教程" src="https://static.deepinout.com/homeicon/sql.png"> <p>SQL 教程</p> </div> </a> <a href="https://geek-docs.com/mysql/mysql-top-articles/1000100_mysql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mysql.png" alt="MySQL 教程" src="https://static.deepinout.com/homeicon/mysql.png"> <p>MySQL 教程</p> </div> </a> <a href="https://geek-docs.com/mongodb/mongodb-top-articles/1000100_mongodb_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mongodb.png" alt="MongoDB 教程" src="https://static.deepinout.com/homeicon/mongodb.png"> <p>MongoDB 教程</p> </div> </a> <a href="https://geek-docs.com/postgresql/postgresql-top-tutorials/1000100_postgresql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/postgresql.png" alt="PostgreSQL 教程" src="https://static.deepinout.com/homeicon/postgresql.png"> <p>PostgreSQL 教程</p> </div> </a> <a href="https://geek-docs.com/sqlite/sqlite-top-articles/1000100_sqlite_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sqlite.png" alt="SQLite 教程" src="https://static.deepinout.com/homeicon/sqlite.png"> <p>SQLite 教程</p> </div> </a> <a href="https://geek-docs.com/redis/redis-top-tutorials/1000100_redis_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/redis.png" alt="Redis 教程" src="https://static.deepinout.com/homeicon/redis.png"> <p>Redis 教程</p> </div> </a> <a href="https://geek-docs.com/mariadb/mariadb-top-tutorials/1000100_mariadb_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mariadb.png" alt="MariaDB 教程" src="https://static.deepinout.com/homeicon/mariadb.png"> <p>MariaDB 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>图形图像教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/vulkan/vulkan-tutorial/vulkan-tutorial-index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vulkan.png" alt="Vulkan 教程" src="https://static.deepinout.com/homeicon/vulkan.png"> <p>Vulkan 教程</p> </div> </a> <a href="https://geek-docs.com/opencv/opencv-python-top-tutorials/1000100_opencv_python_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/opencv.png" alt="OpenCV 教程" src="https://static.deepinout.com/homeicon/opencv.png"> <p>OpenCV 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>大数据教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/r-language/r-top-tutorials/1000100_r_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/r-programming.png" alt="R语言教程" src="https://static.deepinout.com/homeicon/r-programming.png"> <p>R语言教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>开发工具教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/git/git-top-articles/1000100_git_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/git.png" alt="Git 教程" src="https://static.deepinout.com/homeicon/git.png"> <p>Git 教程</p> </div> </a> <a href="https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vscode.png" alt="VSCode 教程" src="https://static.deepinout.com/homeicon/vscode.png"> <p>VSCode 教程</p> </div> </a> <a href="https://geek-docs.com/docker/docker-top-tutorials/1000100_docker_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/docker.png" alt="Docker 教程" src="https://static.deepinout.com/homeicon/docker.png"> <p>Docker 教程</p> </div> </a> <a href="https://geek-docs.com/gerrit/gerrit-top-tutorials/1000100_gerrit_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/gerrit.png" alt="Gerrit 教程" src="https://static.deepinout.com/homeicon/gerrit.png"> <p>Gerrit 教程</p> </div> </a> <a href="https://geek-docs.com/excel/excel-top-tutorials/1001100_excel_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/excel.png" alt="Excel 教程" src="https://static.deepinout.com/homeicon/excel.png"> <p>Excel 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>计算机教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/go-tutorials/go-top-tutorials/1000100_go_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/go.png" alt="Go语言教程" src="https://static.deepinout.com/homeicon/go.png"> <p>Go语言教程</p> </div> </a> <a href="https://geek-docs.com/cpp/cpp-top-tutorials/1000100_cpp_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/cpp.png" alt="C++ 教程" src="https://static.deepinout.com/homeicon/cpp.png"> <p>C++ 教程</p> </div> </a> </div> </fieldset> </div> </div> <div class="tblside"><div class="tblside-roll"><h3>CSS 精品教程</h3><ul><li class="active"><a href="https://geek-docs.com/css/css-top-articles/1000100_index.html">CSS 教程</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1001100_what_is_css.html">CSS 是什么</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1002100_css_syntax.html">CSS 语法</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1003100_css_inclusion.html">CSS 包含</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1004100_css_measurement_units.html">CSS 测量单位</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1005100_css_colors.html">CSS 颜色</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1006100_css_backgrounds.html">CSS 背景</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1007100_css_fonts.html">CSS 字体</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1008100_css_text.html">CSS 文本</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1009100_css_images.html">CSS 使用图像</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1010100_css_links.html">CSS 链接</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1011100_css_tables-2.html">CSS 表格</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1012100_css_borders.html">CSS 边框</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1013100_css_margins-2.html">CSS 边距</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1014100_css_lists-2.html">CSS 列表</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1015100_css_padding-2.html">CSS 内边距</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1016100_css_cursors.html">CSS 光标</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1017100_css_outlines-2.html">CSS 轮廓</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1018100_css_dimension.html">CSS 高度和宽度（尺寸）</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1019100_css_scrollbars.html">CSS 滚动条</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1020100_css_inline_block.html">CSS 内联块</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1021100_css_dropdowns.html">CSS 下拉菜单</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1022100_css_clearfix.html">CSS Clearfix清除浮动</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1023100_css_float.html">CSS 浮动</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1024100_css_arrows.html">CSS 箭头</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1025100_css_resize.html">CSS 调整元素大小</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1026100_css_quotes.html">CSS 引号</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1027100_css_order.html">CSS Order</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1028100_css_position-2.html">CSS 位置</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1029100_css_hypens.html">CSS 连字符</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1030100_css_hover.html">CSS 鼠标悬停</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1031100_css_display.html">CSS Display属性</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1032100_css_focus.html">CSS 焦点</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1033100_css_zoom.html">CSS 缩放</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1034100_css_translate.html">CSS - translate移动</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1035100_css_height.html">CSS 高度</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1036100_css_width.html">CSS 宽度</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1036101_css_max-width.html">CSS max-width 属性</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1036102_css_min-width.html">CSS min-width属性</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1037100_css_opacity.html">CSS 不透明度</a></li><li><a href="https://geek-docs.com/css/css-top-articles/1040100_css_navbar.html">CSS 导航栏</a></li></ul></div><div id="left_wwads_holder"></div> <div class="widget_block"> <div class="div-process-left-4" adsenseclass="adsbygoogle process-left-4" adsenseslot="3857698731" style="display:none !important;margin-top:5px;"></div> <div class="div-process-left-3" adsenseclass="adsbygoogle process-left-3" adsenseslot="2954182773" style="display:none !important;margin-top:5px;"></div> <div class="div-process-left-2" adsenseclass="adsbygoogle process-left-2" adsenseslot="9668802962" style="display:none !important;margin-top:5px;"></div> <ins class="adsbygoogle process-left-1" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="4126353785"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div><div class="tbrside"> <nav> <div style="max-width:300px;"> <div> <ins class="adsbygoogle adsbygoogle-dis" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="3228358949"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="geekdocs-fixed">   <div class="div-process-right-5" bdclass="_28z1vj78az8" bdadid="u6947667" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-4" adsenseclass="adsbygoogle process-right-4" adsenseslot="5392153555" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-3" adsenseclass="adsbygoogle process-right-3" adsenseslot="7809981339" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-2" adsenseclass="adsbygoogle process-right-2" adsenseslot="4741305492" style="display:none !important;margin-top:5px;"></div> <ins class="adsbygoogle process-right-1" style="display:block;margin-top:5px;" data-ad-client="ca-pub-8722128765990495" data-ad-slot="7754481643" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  </div> </div> </nav> </div> </section> <footer class="footer"> <div class="container"> <p>© 2025 <a href="https://geek-docs.com">极客教程</a> 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">蜀ICP备11026280号-10</a> <hr/> 友情链接：<a target="_blank" href="https://deepinout.com/" title="极客笔记">极客笔记</a></p> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1f65400c3a6ea154f17483ea6dc82612"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </footer> <div class="rollbar rollbar-rb"><ul><li class="rollbar-totop"><a href="javascript:(jsui.scrollTo());"><i class="fa fa-angle-up"></i><span>回顶</span></a><h6>回顶部<i></i></h6></li></ul></div> <script> window.jsui={ www: 'https://geek-docs.com', uri: 'https://geek-docs.com/wp-content/themes/dux', ver: '6.2', roll: ["1","2","3"], ajaxpager: '50', url_rp: 'https://geek-docs.com/' }; </script>  <script> var artfold = $(".article-content-fold"); if (artfold.length && artfold.css("max-height")) { var max = artfold.height(); var url = window.location.href; artfold.append('<div class="-fold"><span etap="article-fold">阅读余下全文</span></div>'), $('[etap="article-fold"]') .on("click", (function() { $(this).parent().remove(), artfold.removeClass("article-content-fold").css("max-height", "") })) } </script> <script type="text/javascript" src="https://static.deepinout.com/deepinout/static/adsalternative.min.js?v=1.0.1" async="async" defer="defer"></script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> <script type="text/javascript" src="https://static.deepinout.com/deepinout/static/geekdocs-pcweb-ads.min.v9.0.0.js" async="async" defer="defer"></script>  <script type='text/javascript' src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js?ver=10.2.1' id='jQuery-CDN-js'></script> <script type='text/javascript' src='https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.15.2/katex.min.js?ver=10.2.1' id='Katex-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/ClipBoard/clipboard.min.js?ver=2.0.1' id='copy-clipboard-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/components/prism-core.min.js?ver=1.15.0' id='prism-core-js-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0' id='prism-plugin-autoloader-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/toolbar/prism-toolbar.min.js?ver=1.15.0' id='prism-plugin-toolbar-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/line-numbers/prism-line-numbers.min.js?ver=1.15.0' id='prism-plugin-line-numbers-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/show-language/prism-show-language.min.js?ver=1.15.0' id='prism-plugin-show-language-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.15.0' id='prism-plugin-copy-to-clipboard-js'></script> <script type='text/javascript' id='Front_Style-js-extra'> / <![CDATA[ / var FrontStyle = {"openLinkInNewTab":"on"}; / ]]> / </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/FrontStyle/frontstyle.min.js?ver=10.2.1' id='Front_Style-js'></script> <script type='text/javascript' src='//apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js?ver=6.2' id='bootstrap-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/themes/dux/js/loader.js?ver=6.2' id='_loader-js'></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> / <![CDATA[ / var q2w3_sidebar_options = [{"sidebar":"q2w3-default-sidebar","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":".gogogo","screen_max_width":0,"screen_max_height":0,"widgets":[".geekdocs-fixed",".widget_block"]},{"sidebar":"single","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":".gogogo","screen_max_width":0,"screen_max_height":0,"widgets":["#fixedtoc-2"]}]; / ]]> / </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js?ver=6.1.0' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-includes/js/hoverIntent.min.js?ver=1.10.2' id='hoverIntent-js'></script> <script type='text/javascript' id='megamenu-js-extra'> / <![CDATA[ / var megamenu = {"timeout":"300","interval":"100"}; / ]]> */ </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/megamenu/js/maxmegamenu.js?ver=2.9.7' id='megamenu-js'></script> <script type="text/javascript"> (function ($) { $(document).ready(function () { $(".katex.math.inline").each(function () { var parent = $(this).parent()[0]; if (parent.localName !== "code") { var texTxt = $(this).text(); var el = $(this).get(0); try { katex.render(texTxt, el); } catch (err) { $(this).html("<span class=\"err\">" + err); } } else { $(this).parent().text($(this).parent().text()); } }); $(".katex.math.multi-line").each(function () { var texTxt = $(this).text(); var el = $(this).get(0); try { katex.render(texTxt, el, {displayMode: true}) } catch (err) { $(this).html("<span class=\"err\">" + err) } }); }) })(jQuery); </script> <script type="text/javascript"> Prism.plugins.autoloader.languages_path = "https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/components/"; </script> <script> (function($){ var cc = $(".tbcmdocside .-inner") var cc2 = $(".tbcmdocside .-inner2") var inner2_height = cc2.height() + 10; var inner_height = cc.height() + 50; if( !cc.length ){ return } var ot = $(".content").offset().top var top_cc2 = cc2.offset().top cc2.css("top", ot + inner_height) cc.css("top", ot) cc.animate({ scrollTop: $(".tbcmdocside a.-on").offset().top-300 }, 0) $(window).scroll(function() { ot = $(".content").offset().top var tt = $(document).scrollTop() var yt = 0 if( tt<=top_cc2 ){ yt = top_cc2-tt+ot } var yt2 = 0 if( tt<=ot ){ yt2 = ot-tt } cc2.css("top", yt2 + inner_height) cc.css("top", yt2) }) $(".tbcmdocside dt").on("click", function(){ $(this).parent().toggleClass("-on") }) $(".tbcmdocside .-search input").on("input", function(){ var word = $.trim($(this).val()) if( word ){ $(".tbcmdocside dt, .tbcmdocside dd a").hide() $(".tbcmdocside dd a:contains("+word+")").show() }else{ $(".tbcmdocside dt, .tbcmdocside dd a").show() } }) })(jQuery) </script></body> </html>