Проблема с div блоком, не расширяется на 100% по высоте

dinaron · August 7, 2011

Имеется следующий код html и css


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="container">

   		<div id="header">
                	<div class="header_left">
                         <div class="header_left_line">
                				<div class="header_left_line_bottom">
                    			</div>
               			 </div>

                		 <div class="heder_left_logo">
                		 </div>
           			 </div>
        			 <div class="header_right">
						<div class="header_right_bottom">
                        </div>
         			</div>
    </div> 

	<div id="left" >

   		<div class="left_line">
           <div class="left_menu">

           </div>
           <div id="content">
    <h1>не получается сделать данный блок 100% по высоте</h1>
<h1>не получается сделать данный блок 100% по высоте</h1>
<h1>не получается сделать данный блок 100% по высоте</h1>
<h1>не получается сделать данный блок 100% по высоте</h1>
<h1>не получается сделать данный блок 100% по высоте</h1>
<h1>не получается сделать данный блок 100% по высоте</h1>
           </div>
        </div>
	</div> 


<div id="footer">
        		<div class="footer_left">
           			 <div class="footer_left_line">
           			 </div>
            	</div>
                <div class="footer_right">

				</div>

</div>
</div> 
</body>
</html>


@charset "utf-8";


html, body, div, span, 

  h1, h2, h3, h4, h5, h6, p, blockquote, pre, 

  a, abbr, acronym, address, big, cite, code, 

  img, ins, kbd, q, s, samp, 

  small, strike, strong, 

  dl, dt, dd, ol, ul, li, 

  fieldset, form, label, legend, 

  table, caption, tbody, tfoot, thead, tr, th, td { 

margin:0; 

padding: 0; 

border: 0; 

outline: 0; 

font-size: 100%; 

vertical-align: baseline; 

background: transparent; 

} 

body { 

line-height: 1; 

} 

ol, ul { 

list-style: none; 

} 

blockquote, q { 

quotes: none; 

} 

blockquote:before, blockquote:after, 

q:before, q:after { 

content: ''; 

content: none; 

} 
table { 

border-collapse: collapse; 

border-spacing: 0; 

} 

.clear {clear:both;}
   #container {
    width: 998px; 
    margin: 0 auto; 
    background: #e2e2e2;
	clear:both;


   }
   #header {
	   padding-top:1px;


	height:175px; 
   }
   .header_left {width:306px;
   float:left;
   background:#fff;
   height:175px
   }
   .header_left_line {width:45px;
   float:left;
   height:175px;
   background:#e2e2e2;}
   .header_left_line_bottom {margin-top:102px;
   height:73px;
   width:45px;
   background:#c9c8c8;
}
   .heder_left_logo {margin-left:45px;
   height:175px;
    }
   .header_right {		   padding-top:1px;
    margin-left: 306px;
	height:175px  
}
.header_right_bottom {margin-top:102px;
   height:73px;
   width:100%;
   background:#c9c8c8;}

    #left {
	clear:both;
	background:#fff;
    width: 306px; 
    float: left;

   }
   .left_line {width:45px;
   float:left;
   background:#e2e2e2;

  }
     .left_menu {margin-left:45px;
	 float:left;
	 width:261px;
	 background:#FFF;



    }

   #content {
    padding-top:1px;
	padding:13px 80px 24px 70px;
    margin-left: 306px;
	width:544px;

}
   #footer {
    clear:both;
	height:175px;

   }
   .footer_left {width:306px;
   float:left;
   background:#fff;
   height:150px;
   margin: 0 auto;



   }
   .footer_left_line {width:45px;
   float:left;
   height:150px;
   background:#e2e2e2;
      border-top:#979695 3px solid;}
      .footer_right {
    margin-left: 306px;
	height:175px;
	border-top:#979695 3px solid;
	background:e2e2e2;
}

Хотелось бы решить следующую проблему:

блоку задать высоту 100%<div id="content">, что футер призжался к нижу.

Плиз, помогите решить проблему

Edited August 7, 2011 by dinaron

Non Stop · August 7, 2011

Чтобы задать высоту 100% твоему div'у, задай всем предкам высоту 100% или min-height. Например:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Высота</title>
<style type="text/css">
html, body {
	height:100%;
}
.conteiner, .content {
	min-height:100%;
}
</style>
</head>

<body>
	<div class="conteiner">
		<div class="content">100% высота</div>
	</div>
</body>
</html>

dinaron · August 8, 2011

спасибо

Sign In

Проблема с div блоком, не расширяется на 100% по высоте

Question

dinaron

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Non Stop

Link to comment

Share on other sites

dinaron

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information