4

Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.

site layout

I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height

4

5 回答 5

7

似乎这里的答案忽略了您的大部分要求。我偶然发现了这一点，因为我遇到了与您所追求的相同布局的渲染问题。我把上面的小提琴分叉给你看：

http://jsfiddle.net/RsRf9/2/

主要区别在于整个主体都是可滚动的，而不仅仅是中心的小区域（我认为这就是您所追求的）。

除了清理没有做任何事情的样式（比如位置固定时的浮动），主要的变化是中心 col - 你应该需要的是：

.center{margin:100px 200px;}

另一个变化是如何在侧边栏上获得“高度 100%”的效果——我的诀窍是这样做：

.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}

而不是高度 100%，我只是告诉它从顶部 100（导航底部）延伸到底部 0（页面底部）

这会将内容推到顶部导航下方和两个固定侧栏之间。

于 2013-07-21T23:15:58.323 回答
4

我根据您的要求创建了一个工作小提琴：

这是工作小提琴- 更新以包含固定标题只有顶部栏是固定的

需要注意的重要一点是 div 的结构布局......注意 .center 在 .right 之后

<div class='wrap'>
    <div class='head'>Header</div>
    <div class='bodywrap'>
        <div class='left'>left</div>
        <div class='right'>right</div>
        <div class='center'>center center center center center center center center center center center center ... blah</div>
    </div>
 </div>

而CSS是：

只是标题固定：

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}

.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}

已修复标题和侧边栏（还能够修复 .left 和 .right 尺寸过小的脏问题

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}

.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}

这是顶部和侧面固定中心滚动液体中心柱（.left 和 .right 上没有间隙）

这是浮动的基本用法，但结构标记布局是关键；）

于 2013-04-21T09:07:30.570 回答
0

从基本意义上来说，这实际上很容易做到，您不需要表格（或表格单元格），但混合 px 和 % 大小可能会出现问题。如果你坚持 % 你的页面无论如何都会更好地调整大小。处理跨浏览器问题需要更多的 CSS 调整，但是有很多网格解决方案可以实现经过验证的解决方案，即使对于 IE6 和 twitter 的引导程序等框架也会提供更多。

换句话说，这是一个已解决的问题，但这里有一个快速示例，说明如何手动到达那里；

<div class="container">
<div class="header">
    header
</div>

<div class="left">
left
</div>

<div class="main">
    content
</div>

<div class="right">
    right
</div>
</div>

和CSS；

html, body, .container
{
height:100%;
}

.container
{
background-color: pink;
}

.header
{
background-color: yellow;
height:50px;
}

.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}

.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}

.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}

当然还有小提琴

使用 % sizing 还可以让您获得适用于平板电脑和移动设备的更具响应性的设计。同样，许多网格框架在设计上都是“响应式”的。

于 2013-04-21T09:14:45.200 回答
0

对于这种布局，我使用YUI 网格样式表。它经过试验和测试，可在多种浏览器中使用。

于 2013-04-21T08:42:51.773 回答
0

您可以使用 scrollToFixed 插件来固定左侧边栏和右侧边栏，并且中心栏内容只能向上和向下滚动。对于演示滚动使用下面的链接 http://bigspotteddog.github.io/ScrollToFixed/

还有一件事是使用 Bootstrap 来设计 UI。在页面标题部分包含 Bootstrap CSS 和 JavaScript

  <div class="container">
        <div class="col-md-12">
             <div class="col-md-3" id="left-sidebar">
                 left-content
             <div>
             <div class="col-md-6" id="center">
                 center content
             </div>
             <div class="col-md-3" id="right-sidebar">
                 right-content
            </div>
       </div>
    </div>

您可以根据您的要求进行修改。我只是给你一般提示。

只需编写以下脚本即可滚动

    $(document).ready(function(){
    $('#right-sidebar').scrollToFixed({
                        marginTop: function() {
                            return 5;
                        },
                        limit: function() {
                            return (
                                 $('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
                            );
                        },
                        zIndex: 1,
                        removeOffsets: true
                    });  
    });
于 2016-07-15T13:57:36.880 回答