Впервые использую @media screen ⇐ CSS

[Anonymous]

Все прошло не очень хорошо... Правая боковая панель исчезает, если экран маленький, но верхняя боковая панель остается там, и я не понимаю, почему... после нескольких часов возни я решил обратиться за помощью.

Код: Выделить всё

body{
width:100%;
height:100%;
margin:0px;
background-color:#aaa;
font-family:trebuchet ms, tahoma;
}

@media screen and (max-width:899px){
div.sidebar{visibility:hidden};
div.sidebartop{visibility:visible};
div.mainbox{width:100%;top:calc(100% - 210px);min-height:calc(100% - 210px);}
}

@media screen and (min-width:900px){
body{font-weight:bold};
div.sidebar{visibility:visible};
div.sidebartop{visibility:hidden};
div.mainbox{width: calc(100% - 310px);top:0px;min-height:100%;}
}

div.sidebar{
position:fixed;
right:0px;
height:100%;
z-index:2;
background-color:#9374a4;
width:300px;
color:#fff;
margin:0px;
padding:15px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
border-left:1px solid pink;
}

div.sidebartop{
top:0px;
position:fixed;
z-index:2;
width:100%;
margin:0px;
padding:15px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
height:200px;
background-color:#abab63;
}

Пожалуйста, помогите мне... спасибо

Подробнее здесь: https://stackoverflow.com/questions/461 ... dia-screen