Trick Web Design (Full Screen & Non Full Screen Elements)

StackOverflow https://stackoverflow.com/questions/22161529

  •  19-10-2022
  •  | 
  •  

سؤال

UPDATE

After doing some testing and localhost modifications I have found out what I need:

The website must not be scrollable, only the content area.

When zooming the sidebar height should stay consistently to the bottom of the page.

The header must also zoom in and out but remain full width

لا يوجد حل صحيح

نصائح أخرى

Fiddle: http://jsfiddle.net/dkx2q/2/

Something like this maybe:

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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top