【自学前端笔记1】Fullpage插件使用时遇到某屏不需要铺满的处理方法-前端-CSS教程

【自学前端笔记1】Fullpage插件使用时遇到某屏不需要铺满的处理方法

最近实习做官网页面的时候，因为需要用到整屏滚动，但是呢又不需要每个页面都满屏显示，网上对于不满屏的解决方案对我也不是很适用，所以最后自己综合各路资料加自己探索总结了一个解决方法，可能不规范，但是有效果。

①尾页不满屏

这个我看到网上有给出解答，就是在最后一屏上添加fp-auto-height

<div id="fullpage">
    <div class="section section1"></div>
    <div class="section section2"></div>
    <div class="section section3"></div>
    <div class="section section4"></div>
    <div class="section section5"></div>
    <div class="section section6"></div>
    <div class="section section7 fp-auto-height">
        <div style="height: 300px;"></div>
    </div>
</div>

但是呢，实际使用时发现尾屏高度小于半屏的时候都是默认半屏，大于半屏时才是尾屏自己的高度

<div class="section section7 fp-auto-height">
	<div style="height: 90vh;"></div>
</div>

所以我们再定义一下fp-auto-height的min-height

.section.fp-auto-height {
	min-height: auto !important;
}

这样就可以自定义尾屏的高度了

②其他页不满屏

对于不是尾屏的屏幕，上述方法是不适用的（我只试过我自己用的包是不行的，别的版本不清楚），并且在网上我也没找到合适的破解之法（可能一般只有尾屏不满一屏的需求吧），但是最后我发现其实可以用一个非常简单的方法直接把这个问题过掉，就是margin-bottom（虽然很简单但是一个初学者还是试了一堆方法才想到的，有其他的好方法欢迎评论区交流鸭）

.section1 {
    background: #fadd67;
    margin-bottom: -300px;
}

像这样直接在不要满屏的屏幕上加上这句就行了

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-***patible" content="IE=edge,chrome=1">
        <title>demo</title>
        <script src="https://code.jquery.***/jquery-3.6.0.min.js"></script>
        <script src="http://libs.baidu.***/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.***/npm/echarts@5.4.2/dist/echarts.min.js"></script>
        <!-- <script src="js/jquery.easing.1.3.js"></script> -->
        <script src="js/jquery.fullPage.min.js"></script>
        <link rel="stylesheet" href="css/jquery.fullPage.css" />
	</head>
    <style>
        html, body, .section {
            min-height: 600px;
            min-width: 1000px;
            margin: 0;
        }
        .section1 {
            background: #fadd67;
            margin-bottom: -300px;
        }
        .section2 {
            background: #84a2d4;
        }
        .section3 {
            background: #ef674d;
            margin-bottom: -800px;
        }

        .section4 {
            background: #fed;
        }

        .section5 {
            background: #d04759;
            margin-bottom: -500px;
        }

        .section6 {
            background: #84d9ed;
        }

        .section7 {
            background: #8ac060;
        }
        .section.fp-auto-height {
            min-height: auto !important;
        }
        
    </style>
	<body>
        <div id="fullpage">
            <div class="section section1"></div>
            <div class="section section2"></div>
            <div class="section section3"></div>
            <div class="section section4"></div>
            <div class="section section5"></div>
            <div class="section section6"></div>
            <div class="section section7 fp-auto-height">
                <div style="height: 300px;"></div>
            </div>
        </div>
        <script>
            $(function(){
                $('#fullpage').fullpage({ // fullpage  方法里面接受json对象形式
                    // 是否显示项目导航
                    navigation: true,
                    // navigationPosition: "left",
                    // loopBottom: true,
                    // 滚动速度，单位为毫秒
                    scrollingSpeed: 700,
                }); 
            });
        </script>
	</body>

</html>