Remove height and width from s4-workspace

Question

I am creating website in SharePoint 2013. I have successfully converted html page to master page and also created page layout from it.

When I converted html page it have s4-workspace and at runtime it get height and width. I wanted to remove height and width from it and need vertical scroll bar. After some research I found that SharePoint JavaScript assign height and width at runtime.

I added class "s4-nosetwidth" in s4-workspace which removed width. Is there any way to remove height also.

<div id="s4-workspace" class="s4-nosetwidth">

Answer 1

For removing height attribute you need to use JavaScript.

Another option is to override the height

body #s4-workspace {
    height: ...;
}

Update

<script type="text/javascript"> 
    window.onload = function () {
        ExecuteOrDelayUntilScriptLoaded(startFunction, "sp.js");            
    } 
    function startFunction(){
        $('#s4-workspace').css('height','auto');
    }
</script>

Answer 2

Add Below lines to external js file

  <script type="text/javascript"> 
        window.onload = function () 
{               
 ExecuteOrDelayUntilScriptLoaded(startFunction, "sp.js");           
      }          
function startFunction(){
            $('#s4-workspace').css('height','auto');
        }
    </script>

Then download Sp.js file put it into style library and link that path to the master page, next link our external script file below SP.Js link and make sure that jQuery-3.1.1 are linked correctly.

Answer 3

I was having issue with width and height of the s4-workspace div. This code worked for me. I wanted 100% width and height according to the content. This code gave me a vertical scrollbar.

<script type="text/javascript"> 
    window.onload = function () {
        ExecuteOrDelayUntilScriptLoaded(startFunction, "sp.js");            
    } 
    function startFunction(){
        $('#s4-workspace').css('overflow-x','hidden');
    }
</script>

Answer 4

I found it was easier to do in CSS:

#s4-workspace {
  height: auto !important;
}

Answer 5

Try this. JavaScript takes time to effect. I think this is best solution above all.

*

#s4-workspace {height: calc(100vh - 125px) !important;} *