Question

以下是我的布局如何的JSFiddle示例：http://jsfiddle.net/qKP2v/13/

我想模仿桌面应用程序（如Outlook或Photoshop）的外观，例如左侧和右侧列固定并占据屏幕的整个高度。

在我的应用程序中，页面顶部有一个标题。所以我希望我的标题和侧边栏被修复，而不是在用户滚动时移动。只有#content区域才能移动。

这是一个太大的任务，在这里问我不知道。我只使用CSS2（还不能使用CSS3）。

Answer 1

您可以使用position:fixed;使其正常工作

#header {
    width:100%;
    border: 1px solid #444444;
    height: 100px;
    margin-bottom:15px;
    position:fixed;
    top:0;
}
#wrapper {
    width:100%;
    margin: 0 auto;
    background-color: #FFF;
    min-height:200px;
    border: 1px solid #F0F;
}
#aside-left {
    float:left;
    width:100px;
    border: 1px solid #9C0;
    position:fixed;
    top:100px;
    left:20px;
}
#content{
    margin:0 130px;
    margin-top:100px;
    border: 1px solid red;
}
#aside-right {
    float:right;
    width:100px;
    text-align: right;
    border: 1px solid #9C0;
    position:fixed;
    top:100px;
    right:20px
}

FIDDLE

浮动布局中的CSS全高度固定列

1 个答案: