<!DOCTYPE html> <html> <head> <title>页面平滑过渡</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge,Chorme=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--<script type="text/javascript" src="js/script.js"></script>--> </head> <body> <!--Nav start--> <div class="container"> <div class="st-container"> <input type="radio" name="radio-set" id="st-control-1"> <a href="#st-panel-1">第一个部分</a> <input type="radio" name="radio-set" checked="checked" id="st-control-2"> <a href="#st-panel-2">第二个部分</a> <input type="radio" name="radio-set" id="st-control-3"> <a href="#st-panel-3">第三个部分</a> <input type="radio" name="radio-set" id="st-control-4"> <a href="#st-panel-4">第四个部分</a> <input type="radio" name="radio-set" id="st-control-5"> <a href="#st-panel-5">第五个部分</a> </div> <!--Nav end--> <!--Content begin--> <div class="st-scroll"> <section class="st-panel" id="st-panel-1"> <!--section为H5新增的语义化标签，主要用于存放页面的主要内容--> <div class="st-desc" data-icon="H"></div> <!--在H5内添加自定义属性的时候，一般使用data开头--> <h2>新风系统</h2> <p>新风系统内容</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-desc" data-icon="2"></div> <h2>排水系统</h2> <p>给排水系统内容</p> </section> <section class="st-panel" id="st-panel-3"> <div class="st-desc" data-icon="B"></div> <h2>送风系统</h2> <p>送风系统内容</p> </section> <section class="st-panel st-color" id="st-panel-4"> <div class="st-desc" data-icon="X"></div> <h2>排风系统</h2> <p>排风系统内容</p> </section> <section class="st-panel" id="st-panel-5"> <div class="st-desc" data-icon="C"></div> <h2>空调系统</h2> <p>空调系统内容</p> </section> </div> </div> </body> </html>
加<!DOCTYPE>之后，section的高度就变小了，明明审查元素内显示还是100%；
跟 <!DOCTYPE> 没有关系吧，我看不到你引入的css