css;

@font-face {
    font-family: iranSans;
    src: url('../fonts/iranSans.woff');
}
div.main{
    position: relative;
}
div.head{    
    position: absolute;
}
input#search{
    font-family: iranSans;
    font-size: larger;
    padding: 11px;
    font-weight: 900;
    margin: 20px;
    border: #00000042 solid;
    border-radius: 7px;
    text-align: right;
    background: #ffffff26;
    color: #696262;
}
#map{
 width: 100%;
}

html:

  <div class="main">
        <div class="head">
            <input type="text" id="search" placeholder="دنبال کجا میگردی؟">
        div>
        <div class="map-container">
            <div id="map">div>
        div>
    div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            tileLayer: 512,
            attribution: '© OpenStreetMap'
        }).addTo(map);
    
    document.getElementById('map').style.setProperty('height',window.innerHeight + 'px');
    script>

عرض ادب

ممنون جناب موحد عزیز بابت راهنماییتون.

مشکل برطرف شد.