Question

更新

在做了一些测试和localhost修改后，我发现了我需要的东西：

网站不得滚动，只能滚动内容区域。

缩放侧边栏时，高度应始终保持在页面底部。

标题还必须放大和缩小，但仍保持全宽

Answer 1

小提琴： http://jsfiddle.net/dkx2q/2/

这样的事情可能是：

<强> CSS

body{
    background-color:rgb(0,0,0);
}
#container{
    display:block;
    width:100%;
    height:100%;
}
#fullScreenImage{
    float:left;
    width:25%;
    height:100%;
    background-color:rgb(124,197,118);
    position:relative;
}
#content{
    float:left;
    width:75%;
    height:100%;
}
#header{
    display:block;
    height:15%;
    background-color:rgb(94,142,178);
    position:relative;
}
#sidebar{
    float:left;
    height:85%;
    width:20%;
    background-color:rgb(162,94,179);
    position:relative;
}
#contentArea{
    float:left;
    width:80%;
    height:85%;
    background-color:rgb(255,255,255);
    position:relative;
}
span{
    position:absolute;
    top:50%;
    width:100%;
    text-transform:uppercase;
    font-weight:bold;
    font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial;
    font-size:9em;
    text-align:center;
}
#header span{
    font-size:7em;
    top:40%;
}

<强> HTML

<body>
    <div id='container'>
        <div id='fullScreenImage'><span>Full Screen Image</span>
        </div>
        <div id='content'>
            <div id='header'><span>Header</span></div>
            <div id='sidebar'>
                <span>Sidebar</span>
            </div>
            <div id='contentArea'><span>Content Area</span></div>
        </div>
    </div>
</body>

欺骗网页设计（全屏和非全屏元素）

1 个答案: