Question

我正在尝试制作类似于

的窗口应用程序

http://jsfiddle.net/szfkn/5/结构，但我希望它在sizebars / footer / header / content上不重叠有没有办法在保持流畅的布局的同时做到这一点？

或者在没有滚动和流畅的情况下将内容保存在窗口中的任何好的指示。

Answer 1

Steve Sanderson在他的博客中分享了一些关于如何生成一个漂亮的CSS布局的指示：http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

不知道这是否是您正在寻找的答案，但它绝对值得一读：）

Answer 2

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

无法保证浏览器兼容性，但应该为您打下良好的基础。我提供的示例只是填充内容包装器。您可以将div＃ContentWrap样式修改为：'margin：15％; overflow：hidden;'。请注意，放在容器上的任何填充都会影响您的整体尺寸。

就内容滚动而言，有很多jQuery插件可以帮助内容滚动。 http://jquerytools.org/demos/scrollable/vertical.html似乎有一个很好的例子，说明你在寻找什么。

祝你好运！

单页流体布局

2 个答案: