Question

这个布局非常简单，易于实现，这里已经介绍了很多，我的问题来自于我希望正确的div可以滚动。

我只是不能让左侧流畅且静态定位，同时允许右侧为固定宽度和可滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <style type="text/css" style="display: none !important;">   
    body {
        margin: 0 0 0 0;
        overflow: hidden;
    }

    #page-wrap {
        background: white;
        max-width: 100%;
    }

    #main-content {
        background-color: #797979;
        padding-right: 350px;
        padding-top: 20px;
        height: 100%;
        float: left;
        position: absolute;
    }

    #right-sidebar {
        background-color: #cacaca;
        width: 350px;
        float: right;
        overflow: auto;
        height:100%;
    }
    </style>
</head>
    <body> 
        <div class="page-wrap">         
            <div id="main-content">                 
                    <h2>Content Area</h2>
            </div>
            <div id="right-sidebar">
                Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>

            </div>              
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

Answer 1

试试这个 - jsFiddle

body {
    margin: 0 0 0 0;
    background-color: #797979;
    /*overflow: hidden;*/
}
#page-wrap {
    background: white;
    max-width: 100%;
}
#main-content {
    position:absolute;
    right:200px;
    left:0px;
    padding:20px;
}
#right-sidebar {
    background-color: #cacaca;
    position:fixed;
    overflow-y:scroll;
    right:0px;
    width:200px;
    height:100%;
}

两列Div布局：左=流体，右=固定和可滚动

1 个答案: