Dynamic Map Size according to Screen

I am Using Open layers to publish a Map. But I can't figure out the way to Make the map size dynamic according to Screen Size. As the map remains same on every screen irrespective of the screen size. My Code is '''

        layer = new ol.layer.Tile({
        title: 'Basemap',
        baseLayer: true,
        visible: true,

      
        source: new ol.source.TileWMS({
            url: 'http://mlinfomaps.in/geoserver/wms',
            params: { 'LAYERS': 'MSSDS_WS:MSSDS_BASEMAP', 'TILED': true },
            serverType: 'geoserver',

            // Countries have transparency, so do not fade tiles:
            transition: 0,
            crossOrigin: "anonymous"
        })
    });


    var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        //className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        //undefinedHTML: ' '
    });

    function scaleControl() {
        control = new ol.control.ScaleLine({
            units: 'metric',
            bar: true,
            steps: 4,
            text: true,
            minWidth: 140
        });
        return control;
    }

    var sourceMeasure = new ol.source.Vector({
        crossOrigin: "anonymous"
    });
    var vectorMeasure = new ol.layer.Vector({
        source: sourceMeasure,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#df1c29',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#df1c29'
                })
            })
        }),
        title: 'Measure Overlay',
    });

    // The Map
    //var overlay = new ol.Overlay
    //    ({
    //        element: container,
    //        autoPan: true,
    //        autoPanAnimation: {
    //            duration: 250
    //        }
    //    });


    var view = new ol.View
        ({
            center: ol.proj.transform([76.7997, 18.6298], 'EPSG:4326', 'EPSG:3857'),
            zoom: 6.8,
            minZoom: 6.8,
            maxZoom: 12

        });

    var map = new ol.Map
        ({
            target: 'map',
            controls: ol.control.defaults().extend([mousePositionControl, scaleControl()]),
            view: view,
            //overlays: [overlay],
            layers: [layer]
        });

    '''

The map on different screen looks like this: On my screen It looks like 1

On my colleague's screen it looks like 2

Please Help me get through this.

Thanks In Advance!