position:fixed之后的div继续占据位置，div不定高

Question

.Input-Nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: white;
    }

    .input {
        margin-top: 5px;
        display: flex;
    }

    .nav {
        margin: 5px 0;
    }

    .input>view:nth-child(1),
    .input>view:nth-child(3) {
        width: 10%;
        float: left;
        text-align: center;
    }

    .input>view:nth-child(2)>.iconfont {
        float: left;
        color: darkgray;
    }

    .input input {
        width: 70%;
        float: left;
    }

    .input>view:nth-child(2) {
        background-color: rgb(247, 247, 247);
        overflow: hidden;
        float: left;
        width: 80%;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .scroll-view_H {
        width: 100%;
        white-space: nowrap;
    }

    .nav text {
        margin: 0 10px;
    }

    .navColor {
        color: red;
    }
    .swiper image{
        width: 100%;
    }

    export default {
        data() {
            return {
                reds: { //请求的数据
                    category: [], //导航栏
                    data: [] //0是轮播图，1是轮播图下的小图标，2是商品列表上的3个图片，3是不知道，4是商品列表
                },
                nav: "1",
            }
        },
        onLoad() {
            let that = this
            uni.request({ //首页数据
                url: 'http://ceshi3.dishait.cn/api/index_category/data',
                success: (res) => {
                    console.log(res)
                    that.reds = res.data.data
                }
            });
        },
        methods: {

        }
    }

<template>
    <view id="content">
        <view class="Input-Nav">
            <view class="input">
                <view>
                    <text class="iconfont">&#xe621;</text>
                </view>
                <view>
                    <text class="iconfont">&#xe632;</text>
                    <input type="text" placeholder="智能积木 越野四驱车" />
                </view>
                <view>
                    <text class="iconfont">&#xe60e;</text>
                </view>
            </view>
            <view class="nav">
                <scroll-view class="scroll-view_H" show-scrollbar="true" scroll-x="true">
                    <text :class="[nav == item.id ? 'navColor' : '']" v-for="item in reds.category"
                        :key='item.id'>{{item.name}}</text>
                </scroll-view>
            </view>
        </view>
        <view class="content">
            <swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3000" duration="500">
                <swiper-item v-for="item in reds.data[0].data">
                    <image :src="item.src"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

App.vue的样式

    /*每个页面公共css */
    * {
        margin: 0;
        padding: 0;
    }

    @font-face {
      font-family: 'iconfont';  /* Project id 2537631 */
      src: url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.woff2?t=1628821739001') format('woff2'),
           url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.woff?t=1628821739001') format('woff'),
           url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.ttf?t=1628821739001') format('truetype');
    }

    .iconfont {
        width: 7vh;
        font-family: "iconfont" !important;
        font-size: 25px;
        color: black;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

Answer 1

你这个什么类型的项目？微信小程序或者浏览器都有调试工具。浏览器测试你的代码没问题，可以浮动不占位