How to keep space for header and footer (window resize issue)?

[browserspotParticipant]

I have a quadrant splitter (basically four boxes, 2 on top 2 at the bottom). I want to keep space 40px for header, and 25px as footer. However, if I am changing the height and width of the “splitContainer”, window resize is not working properly. If I change the size of the window, the panels are not sizing according to the window height and width.

$(document).ready(function () {

var totalScreenHeight = $(window).height();
var totalSplitterHeight=totalScreenHeight-70;
var totalScreenWidth = $(window).width();

// This line works (full width, full height)
// $(‘#splitContainer’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘vertical’, panels: [{ size: ‘50%’ }, { size: ‘50%’}] });

// This line has issues with window resizing
$(‘#splitContainer’).jqxSplitter({ height: totalScreenHeight, width: totalScreenWidth, orientation: ‘vertical’, panels: [{ size: ‘50%’ }, { size: ‘50%’}] });

$(‘#leftSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’,panels: [{ size: ‘50%’ }, { size: ‘50%’}] });
$(‘#rightSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’,panels: [{ size: ‘50%’ }, { size: ‘50%’}] });

});

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

one

two

three

four

Can you please help?

[Peter StoevKeymaster]

Hi browserspot,

Here’s a sample: http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[browserspotParticipant]

Hi Peter,
Thank you for your response.

The solution (in the link you provided) only puts the footer at the bottom. If you populate the divs, in this case “left panel”, or “bottom-right panel”, the text flows behind the footer and gets hidden. Is there a way to fix this? Here’s the code…

    
    
        $(document).ready(function () {
		
        $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical',  panels: [{ size: '50%' }, { size: '50%'}] });
		$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		   
        });
    
    
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    
<div style="width: 100%;height: 50px;background: cyan">
        Header
    </div>
    <div style="padding-top: 50px;padding-bottom: 50px;width: 100%;height: 100%">
       <div>
            <div>
                <div>
                    <div>
                       one
                    </div>
                    <div>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                       three
                    </div>
                    <div>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
        </div>         
      </div>
      <div style="background: lightgreen;width: 100%;height: 50px">
        Footer
    </div>        

[Peter StoevKeymaster]

Hi browserspot,

It seems that you missed an important part from the blog post I pointed out. The Elements there are with Absolute Positioning and the Box-Sizing is set to Border-Box i.e your Splitter’s Padding is included in its Size which is required if you wish to have fixed header and/or fixed footer.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[browserspotParticipant]

Peter,
You are amazing! Thank you!

jqWidgets is a really great library. I will recommend to anybody who is looking for a comprehensive jquery library. However, I think you need to market this a little more, especially in America. May be also make the website look sleeker…something like Sencha . I am sure it will be a success. Good luck to you and your team! Again, thank you for the great work!

[Author]

Posts