老师，什么时候写width:100%;height:100%;什么时候写position:absolute;top,bottom,left.right=0;？？这两种样式不是都是让这个标签占满全屏吗？？

为什么我的.search-wrapper和.search-container样式写position的时候滚动条可以用，写成width就不能用了

这样滚动条不能用：

.search-wrapper {

        overflow: hidden;

        width: 100%;

        height: 100%;

        background-color: $bgc-theme;

    }

    .search-container {

        overflow: hidden;

        width: 100%;

        height: 100%;

        background-color: $bgc-theme;

    }

这样滚动条可以用

<template>

    <transition name="search">

        <div class="search-container">

            <div class="search-wrapper">

                <div class="g-header-container">

                    <search-header></search-header>

                </div>

                <div class="g-content-container">

                    <search-scroll>

                        <search-hot></search-hot>

                        <search-history ref="history" @show-confirm="showConfirm"></search-history>

                    </search-scroll>

                </div>

            </div>

            <me-confirm ref="confirm" :visible='visible' @confirm='confirm' @cancel='hideConfirm'></me-confirm>

        </div>

    </transition>

</template>

<script>

import SearchHeader from './header.vue'

import SearchScroll from 'base/scroll'

import SearchHot from './hot'

import SearchHistory from './history'

import MeConfirm from 'base/confirm'

import {SEARCH_HISTORY_KEYWORD_KEY} from './config'

import storage from 'assets/js/storage'

export default {

    name: "Search",

    components: {

        SearchHeader,

        SearchScroll,

        SearchHot,

        SearchHistory,

        MeConfirm

    },

    data() {

        return {

            visible: false

        }

    },

    methods: {

        showConfirm() {

            this.$refs.confirm.show()

        },

        hideConfirm() {

            this.$refs.confirm.hide()

        },

        confirm() {

            this.$refs.confirm.hide()

            this.$refs.history.clearAll()

        }

    },

}

</script>

<style lang="scss" scope>

@import "~assets/scss/mixins";

    .search-wrapper {

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: $search-z-index;

        background-color: $bgc-theme;

    }

    .search-container {

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: $search-z-index;

        background-color: $bgc-theme;

    }

    .search-enter-active, .search-leave-active {

        transition: all .3s;

    }

    .search-enter, .search-leave-to {

        transform: translate(100%, 0);

    }

</style>