•  12-12-2019
  •  | 
  •  

Question

I am trying to make a in window app similar to

http://jsfiddle.net/szfkn/5/ structure but I want it to not overlap on the sizebars/footer/header/content is there a way to do this while still maintaining a fluid layout?

Or any good pointers on keeping content in window without scrolls and fluid.

Was it helpful?

Solution

Steve Sanderson in his blog shared a few pointers on how to generate a nice css layout: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Don't know if it is the answer you are looking for but it is definetely worth reading :)

OTHER TIPS

<html>
<head>
    <title>Fluid Layout</title>
<style>
    .hBar, .vBar
    {
            opacity:.5;
            position:absolute;
            font-weight:bold;
            font-family:Tahoma, Arial, Times New Roman;
            text-align:center;
    }
    div
    {
        display:block;
    }
    .hBar
    {
        height:10%;
        width:100%;
            left:0px;
        z-index:5000;
        font-size:1.2em;
    }
    .vBar
    {
        width:5%;
        height:100%;
        top:0%;
        z-index:3000;
        font-size:.7em;
        color:Lime;
    }
    div#TopWrap
    {
        background-color:#000;
        top:0%;
    }
    div#RightWrap
    {
        background:#0FF;
        right:0px;
    }
    div#BottomWrap
    {
        background-color:#F00;
        bottom:0px;
    }
    div#LeftWrap
    {
        background-color:#FF0;
        left:0px;
    }
    div#ContentWrap
    {
        padding:7% 0% 0% 8%;
        position:relative;
        z-index:1000;
    }
</style>
</head>
<body>
    <div id="TopWrap" class="hBar">
        Top Wrap</div>
    <div id="RightWrap" class="vBar">
        Right Wrap</div>
    <div id="BottomWrap" class="hBar">
        Bottom Wrap</div>
    <div id="LeftWrap" class="vBar">
        Left Wrap</div>
    <div id="ContentWrap">
        <h3>
            Fluid Layout</h3>
        <div>
           @* Content goes here *@
        </div>
    </div>
</body>
</html>

Can't guarantee browser compatibility, but should get you a good foundation. The example I have provided just pads the content wrapper. You could modify the div#ContentWrap styling to: 'margin:15%;overflow:hidden;'. Be mindful that any padding you place on that container will affect your overall size.

As far as the content scrolling, there are plenty of jQuery plugins out there that can help with the content scrolling. http://jquerytools.org/demos/scrollable/vertical.html seems to have a good example of what you are looking for.

Best of luck!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top