0

我正在尝试制作一个类似于

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

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

4

2 回答 2

5

Steve Sanderson 在他的博客中分享了一些关于如何生成漂亮的 CSS 布局的建议：http: //blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-让它更容易/

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

于 2012-03-15T10:53:20.477 回答
0 
<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似乎有一个很好的例子来说明你正在寻找什么。

祝你好运！

于 2012-03-15T04:01:49.863 回答