Question

任何人都可以帮助我进行以下div布局吗？我尝试了几种解决方案，但是，我能够实现这一目标的唯一方法就是使用表格。

site layout

我看了Holy Grail 3 Column Layout，然而，这个layoyt不是100％高度，并且标题没有固定，我也只需要滚动内容，侧边栏需要固定100％高度

Answer 1

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

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

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

.center{margin:100px 200px;}

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

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

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

这将推动内部导航和两个固定侧边栏之间的内容。

Answer 2

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

这是working fiddle - 更新为包含固定标题仅限固定标题

重要的是要注意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是：

JEAR HEADER FIXED：

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}

HEADER和SIDEBARS已修复（也能修复.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}

Here is with top and sides fixed center scroll liquid center column（在.left和.right上没有差距）

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

Answer 3

我使用YUI grids样式表进行此类布局。它经过了试用和测试，适用于多种浏览器。

Answer 4

这实际上很容易做到基本的意义，你不需要表格（或表格单元格），但混合px和％尺寸可能会有问题。如果坚持％，您的页面无论如何都会更好地调整大小。处理跨浏览器问题需要更多的CSS调整，但有很多网格解决方案实现了经过试验和测试的解决方案，即使对于IE6和twitter的bootstrap等框架将提供更多的顶部。

换句话说，这是一个已解决的问题，但这里有一个简单的例子说明如何手动到达那里;

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

当然是Fiddle

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

Answer 5

您可以使用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
                    });  
    });

3列，固定标题，侧边栏固定，内容可滚动

5 个答案: