Как организовать скрытие блока при уменьшении окна?
Пример - google. ru/nwshp?ned=ru
<style type="text/css">
html, body {height: 100%;}
.wrap {
width:100%;
min-width:1000px;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
.outer {
margin:0 200px 0 200px;
zoom:1;
}
.outer:after {
content:'';
clear:both;
display:block;
overflow:hidden;
height:0;
}
.boxCL {
float:left;
width:100%;
zoom:1;
}
.centerCol {
float:right;
width:100%;
zoom:1;
}
.leftCol {
background:#FFFFCC;
float:left;
width:160px;
padding:20px;
position:relative;
margin-left:-200px;
zoom:1;
}
.rightCol {
background:#CCFFFF;
float:right;
width:160px;
padding:20px;
position:relative;
margin-right:-200px;
zoom:1;
}
</style>
<body>
<div class="wrap">
<div class="outer">
<div class="boxCL">
<div class="centerCol">меню</div>
<div class="leftCol">контент</div>
</div>
<div class="rightCol">скрыть если окно меньше 900px</div>
</div>
</div>
</body>
|
Решил проблему сам
<script type="text/javascript">
var width, height;
var IE=(navigator.userAgent.indexOf('MSIE')!=-1)
function resizeElement() {
if(window.innerWidth)
width=window.innerWidth;
else if((document.body)&&(document.body.clientWidth))
width=document.body.clientWidth;
if(window.innerHeight)
height=window.innerHeight;
else if((document.body)&&(document.body.clientHeight))
height=document.body.clientHeight;
if(IE)
{
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth)
{
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
}
var element=document.getElementById('rightCol');
var elementw=document.getElementById('outer');
width=(width>900)?"block":"none";
widthz=(width=="block")?"0 200px 0 200px":"0 0 0 200px";
element.style.display=width;
elementw.style.margin=widthz;
}
window.onload=resizeElement;
</script>
</head><body onresize="resizeElement()">
<div class="wrap">
<div id="outer" class="outer">
<div class="boxCL">
<div class="centerCol">меню</div>
<div class="leftCol">контент</div>
</div>
<div id="rightCol" class="rightCol">скрыть если окно меньше 900px</div>
</div>
</div>
</body></html>
|
| Часовой пояс GMT +3, время: 09:39. |