Home/ Questions/Q 801875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T23:30:39+00:00

I’m so close but I can’t get this to work like I want it.

  • 0

I’m so close but I can’t get this to work like I want it. I’m trying to get the header and the menu to always be visible and have the content take up the rest of the view screen and have it’s own scrollbar when it overflows. The problem is that the width of the content isn’t being stretched to the right and I get a scroll bar in the middle of my page. I also can’t get it to take up the rest of the remaining window height, if I set the height to 100% it wants to use the whole window height instead of what is left.

I’m only working with IE7 or better so need to worry about javascript and am not averse to using jQuery if it can solve this problem!

http://pastebin.com/x31mGtXr

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how it ended up for anyone that is curious. I had to cheat using some jQuery, but it did the trick and now it looks great when I resize it as well. 🙂

    <style type="text/css">
        html, body {
            height: 100%;
            font-family: 'Calibri','Tahoma','Arial', sans-serif;
            font-size: 14px;
            overflow: hidden;
        }
        #top{
            width: 100%;
        }
        #container{
            width: 100%;
            overflow: auto;
        }
        #menu {
            float: left;
            width: 12em;
        }
        #content {                
            overflow: auto;
            border-left: black solid 1px;
            padding: 0 0 0 .5em;
        }
</style>

<script type="text/javascript">
        function rez(){
            $('#content').css('height', $(window).height()-$('#top').height());
            $('#content').css('min-height', $('#menu').height());                
            $('#container').css('height', $(window).height()-$('#top').height());
        };
        $(window).resize(function() {
          rez();
        });
        $(window).load(function () {
          rez();
        });
</script>


<body>
    <div id="top">
        <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/>
        <div id="top-space" style="border-bottom: gray solid 1em;"></div>
    </div>        
    <div id="container">            
        <div id="menu">
            <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/>
        </div>
        <div id="content">
            <tiles:get name='content'/>
        </div>
    </div>
</body>
    • 0