Css проблема leftcol height 100%

Тема в разделе "Другие языки", создана пользователем 1Dreamweaver1, 7 июл 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. 1Dreamweaver1

    1Dreamweaver1

    Регистр.:
    5 янв 2008
    Сообщения:
    417
    Симпатии:
    44
    Подскажите как сделать левую колонку <sidebar> по высоте в 100%. В левой колонке (sidebar) вверху будет расположена форма(login form), а в самом низу картинка, как background. В зависимости от количества контента (middle), кортинка в левой колонке должна тяуться к низу до (footer).


    Код:
    <style type="text/css" media="screen"> 
    * { padding: 0; margin: 0; }
    
    html, body {height: 100%;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     height:100%;
    }
    input, select {  margin: 0;  padding: 0;}
    
    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {  margin: 0;  padding: 0;  border: 0;  border-collapse: separate;  border-spacing: 0;}
    
    #wrapper { 
     margin: 0 auto;
     width: 922px;
    }
    
    #header {
     color: #333;
     width: 902px;
     padding: 10px;
     height: 100px;
     margin: 10px 0px 5px 0px;
     background: #ABBEBE;
    }
    #sidebar { 
     color: #333;
     margin: 10px;
     padding: 0px;
     width: 195px;
     float: left;
     background:#ccc;
     height:90%; 
     position:absolute; 
     background:url(../images/image.jpg) left bottom no-repeat;
    }
    #middle { 
     float: right;
     color: #333;
     margin: 10px;
     padding: 0px;
     width: 683px;
     display: inline;
     position: relative;
    }
    #footer { 
     width: 902px;
     clear: both;
     color: #333;
     background: #ABBEBE;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }
    .clear { clear: both; background: none; }
    </style>
    </head>
    <body>
       <!-- Begin Wrapper -->
       <div id="wrapper">
             <!-- Begin Header -->
            <div id="header">
    		        Header		 
    		 </div>
    		 <!-- End Header -->
    		       <!-- Begin Left Column -->
    		       <div id="sidebar">
                            Login form
    		       </div>
    		       <!-- End Left Column -->
    		       <!-- Begin Right Column -->
    		       <div id="middle">Content.
    Text text text  text text  text text  text text  text text 
                                <br />
    						   <br />
                                <br />
    						   <br />
                                <br />
    						   <br />
                                <br />
    						   <br />
                                <br />
    						   <br />
                                <br />
    					  </p>
    			   <div class="clear"></div>
    		       </div>
    		       <!-- End Right Column -->
    			   <div class="clear"></div>
             <!-- Begin Footer -->
             <div id="footer">
                   This is the Footer		
             </div>
    		 <!-- End Footer -->
       </div>
       <!-- End Wrapper -->
    </body>
    </html>
     
  2. masto

    masto Прохожие

    http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
     
Статус темы:
Закрыта.