Трехколоночный резиновый сайт

tanaka · July 27, 2012

Доброго времени суток уважаемые форумчане!

Верстаю трехколоночный резиновый сайт,возникала проблема в ie6,при уменьшении окна браузера не появляется полоса прокрутки,хотя вроде как все правильно сделал через javascript

Вот весь код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="all.css" />
    <!--[if lt IE 7]>
         <style type="text/css">
#content {height:100%}
#header .wrap,#content,#footer {width:expression((document.documentElement.clientWidth||document.body.clientWidth)<800?'800px': "auto")}
         </style>
    <![endif]-->

    <style type="text/css">
*{
    margin: 0;
    padding: 0;
    font: 12px arial,sans-serif;
}
p{
    padding:30px 5px;
}
html,body{
    height: 100%;
}
#header{
    height: 100px;
    position: absolute;
    background-color: #D9D2BD;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 800px;
}
#wrapper{
    height: 100%;
    height: auto !important;
    min-height: 100%;
    width: 100%;
    background: #fafafa;
    min-width: 800px;
    max-width: 1300px;
}
#content{
    padding: 100px 0 0 0;
    overflow: hidden;
    width: 100%;
    height: 100%;

}
#center{
      float: left;
      width: 100%;

}
#ot{
   padding: 0 21%;

}
#left{
    width: 20%;
    background: #DDE787;
    float: left;
    margin-left: -100%;

}
#right{
    float: left;
    width: 20%;
    background-color: #E8FFE8;
    margin-left: -20%;
}
#empty{
    height: 100px;
}
#footer{
    height: 100px;
    width: 100%;
    background: #2FC5D0;
    margin-top: -100px;
    min-width: 800px; 
}
.clear{
    clear: both;
}
    </style>
</head>
<body>

<div id="wrapper">
      <div id="content">
            <div id="center">
                <div id="ot">
             <p>xxxxxxxxxxxxxxxxx zzzzzzzzzzzzzzzzz ddddddddddddddddgh ghd ghdfhdfghd dfghdhdfhdfh fgsdqrtwqgys hg dfgdg
                dsfg gfdg dfgdfgdfg fg g fg gh gfhdfhghg gfhg ghhgfhrtrgdfiajfidj fjdkfjksajhffiwue sdfjksdfkasd fjksdf fd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p></p><p></p><p></p><p></p><p></p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p>
                </div>
            </div>
            <div id="left">
                <p>xxxxxxxxxxxxxxxxx zzzzzzzzzzzzzzzzz ddddddddddddddddgh ghd ghdfhdfghd dfghdhdfhdfh fgsdqrtwqgys hg dfgdg
                dsfg gfdg dfgdfgdfg fg g fg gh gfhdfhghg gfhg ghhgfhrtrgdfiajfidj fjdkfjksajhffiwue sdfjksdfkasd fjksdf fd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p></p><p></p><p></p><p></p><p></p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p>
                </div>
            <div id="right">
                 <p>xxxxxxxxxxxxxxxxx zzzzzzzzzzzzzzzzz ddddddddddddddddgh ghd ghdfhdfghd dfghdhdfhdfh fgsdqrtwqgys hg dfgdg
                dsfg gfdg dfgdfgdfg fg g fg gh gfhdfhghg gfhg ghhgfhrtrgdfiajfidj fjdkfjksajhffiwue sdfjksdfkasd fjksdf fd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p></p><p></p><p></p><p></p><p></p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>dddddddddddddddd</p>
                <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p> <p>cccccccccccccccccccccc</p>
            </div>
       </div>
       <div id="empty"></div>
    </div>
<div class="clear"></div>
<div id="footer">fffffffffffff</div>
<div id="header">111</div>
</body>
</html>

USF · July 27, 2012

overflow: hidden;

:huh:

tanaka · July 27, 2012

overflow: hidden;

прописал это свойство правой , левой колонке и центру,всё равно прокрутки нет

Edited July 27, 2012 by tanaka

USF · July 27, 2012

его наоборот убрать надо. почитайте про это свойство.

#content{
padding: 100px 0 0 0;
overflow: hidden;
width: 100%;
height: 100%;
}

Seemann · July 27, 2012

Проблема с IE6 давно решена - его просто не нужно поддерживать.

Sign In

Трехколоночный резиновый сайт

Question

tanaka

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

tanaka

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Seemann

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information