Question

我试图获得包含页眉，页脚和两列的布局。网站的宽度必须相对于屏幕分辨率和高度。右栏的宽度应为250px。如果内容很大，左列（内容）应该有一个垂直滚动条。

换句话说，页眉，页脚和右侧应始终可见并固定。如果需要，内容应该有垂直滚动条。

由于

编辑：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
    body {
    font: 11px Tahoma, Arial;
    margin: 0;
    padding: 0;
    color: #3d5770;
    background-color: #A7A7A7;  
}   
    #wrapper
{   
    min-width: 987px;   
    margin-left: auto;
    margin-right: auto;
    width: 98%; 
}   
    #header
{
background-color: orange;
    clear: both;
    float: left;
    width: 100%;   
    height:100px;
    background-color: orange;    
}   
    #main
{    
    width: 100%;
    background-color: White;
}

#footer
{
    position: absolute;
    bottom: 0px;
    height: 30px;
    clear:both;
    background-color: aqua;
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}       

#content
{
    position: absolute;
    top: 100px;
    bottom: 30px;
    overflow: auto;
    margin-right: 262px;
    background-color: White;
}

#right
{       
    width: 245px;    
    float: right; 
}

#rightInner
{
    position: absolute;
    top: 100px;
    bottom: 30px;
    width: 244px;
    background-color: Lime;
}


</style>
</head>

<body>

<div id="wrapper">         
    <div id="header">header</div>

    <div id="main">
        <div id="right">
            <div id="rightInner">Banners</div>
        </div>

        <div id="content">Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content </div>
    </div>

    <div id="footer">footer</div>         
</div>       

</body>
</html>

正如您所看到的，内容div正在增长，高度是屏幕的最大高度。这在我的22英寸屏幕上工作得很好但是当我改变屏幕尺寸时，我的屏幕在内容和正确的div之间会有一点分裂......

Answer 1

试试这个Fiddle

做了一些不同的方式，

html, body { background: #ccc; }
.wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 20px;
    overflow: hidden;
    padding: 20px;
    min-width:998px;
}

.main {
    margin: 0 220px 0 0;
}

.main, .sidebar {
    background: none repeat scroll 0 0 #EEEEEE;
    min-height: 100px;
}

.sidebar {
    float: right;
    height: 200px;
    width: 200px;
    background: #eee; 
    min-height: 100px;
}

Answer 2

我终于找到了解决方案！我刚刚添加了左列样本。如果需要，可以将其删除。

注意：这在IE7中不起作用!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
        body
        {
            font: 11px Tahoma, Arial;
            margin: 0;
            padding: 0;
            color: #3d5770;
            background-color: #A7A7A7;
        }
        #header, #footer, #main
        {
            position: absolute;
            min-width: 987px;
            width: 98%;
            margin-left: 1%;                        
        }
        #content, #right, #left
        {
            height: 100%;
            overflow-y: auto;
        }
        #header
        {
            height: 100px;
            top: 0;
            background-color: orange;
        }
        #main
        {
            top: 100px;
            bottom: 30px;
            background-color: White;
        }        
        #footer
        {
            height: 30px;
            bottom: 0px;            
            background-color: #9933FF;
        }     
        #innerContent    
        {
            padding: 10px;
        }
        #left
        {
            float: left;
            width: 245px;            
            margin-right: 3px; /* Space between content and left div */
            background-color: Lime;
        }
        #right
        {
            float: right;
            width: 245px;            
            margin-left: 3px; /* Space between content and right div */
            background-color: Lime;
        }
    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="main">
        <div id="left">Banners Banners Banners Banners Banners 54321</div>
        <div id="right">Banners Banners Banners Banners Banners 54321</div>
        <div id="content">
            <div id="innerContent">
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content 1
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content 2
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content
                Dynamic content 3                
            </div>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

内容div剩余高度

2 个答案: