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.

有帮助吗?

解决方案

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 :)

其他提示

<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!

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top