CODEWITHSUNDEEP
htmlcss
user3357780
user3357780

Reputation: 11

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

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

Upvotes: 0

Views: 74

Answers (1)

chiliNUT
chiliNUT

Reputation: 19573

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>

Upvotes: 1

Related Questions