div высота не отображается правильно

У меня есть элемент div с двумя элементами div в нем, а внутренние divs плавают. Но я хочу главный div с автоматической высотой. Не зафиксировано. И фон должен отображаться правильно. Когда я устанавливаю высоту 250px, фон показывает только область 250 пикселей. Но когда я установил высоту auto, фон не отображается. Как я могу сделать фон для отображения с автоматической высотой?div высота не отображается правильно

Мой HTML-код: -

<div class="ejz_wc" id="ejz_wc"> 
    <div class="ejz_wc_main" id="ejz_wc_main"> 
     <div class="ejz_wcm_txt"> 
      <h2 class="ejz_wc_1_h2">Welcome</h2> 
      <p class="ejz_wc_msg"> 
      If you are new to us then Register a free account today .<br /> 
      We are here to give you entertainment 
      </p> 
      <div class="wclinks"> 
      <a href="<? echo $url; ?>/info/about.php">Learn moare about us</a><br /> 
      <a href="<? echo $url; ?>/info/payment.php">Learn more about Payment</a><br /><br /> 
      <a href="ez-register.php#free">Register</a> for a free Account<br /> 
      <a href="ez-register.php#performer">Register</a> for a Premium Account<br /> 
      </div> 
     </div> 
     <div class="ejz_wc_box"> 
      <div class="ejz_wcbox"> 
       <h3>Sign In</h3> 
       <p>Sign in to us 

       <center><a class="lnksnrg" href="ez-login.php"><div class="signin_ejz">Login</div></a></center> 
       <h3>Not registered yet?</h3> 
       Register now and get access to all items.</p> 
       <br /> 
       <center><a class="lnksnrg" href="ez-login.php"><div class="register_ejz">Register</div></a></center> 
      </div> 
     </div> 
    </div> 
</div>

И мой код CSS является: -

.ejz_wc 
{ 
width:900px; 
margin:auto; 
height:250px; 
} 
.ejz_wc_main 
{ 
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
height:100%; 
border-radius:10px; 
-moz-border-radius:10px; 
width:100%; 
background:#f4f4f4; 
} 
.ejz_wcm_txt a 
{ 
text-decoration:none; 
} 
.ejz_wcm_txt a:hover 
{ 
text-decoration:underline; 
} 
.ejz_wcm_txt 
{ 
float:left;height:auto; 
width:450px; 
padding:10px 20px; 
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
} 
.ejz_wc_box 
{ 
float:right;height:auto; 
width:320px; 
padding:10px; 
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
} 
.ejz_wc_1_h2 
{ 
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
font-size:x-large; 
color:#38939b;height:auto; 
} 
h1, h2, h3, h4, h5, h6 
{ 
font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
} 
.signin_ejz , .register_ejz 
{ 
background:#019be1; 
background: -moz-linear-gradient(019be1, #1a75d6); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1a75d6),color-stop(1, #019be1));  
background: -webkit-linear-gradient(#019be1, #1a75d6); 
background: -o-linear-gradient(#019be1, #1a75d6); 
background: -ms-linear-gradient(#019be1, #1a75d6); 
background: linear-gradient(#019be1, #1a75d6); 
padding:5px; 
border-radius:10px; 
-moz-border-radius:10px; 
color:white; 
text-decoration:none; 
width:100px; 
margin:auto; 
border:2px solid #019be1; 
} 

.lnksnrg 
{ 
text-decoration:none; 
color:white; 
} 
.lnksnrg:hover 
{ 
text-decoration:none; 
} 
.signin_ejz:hover , .register_ejz:hover 
{ 
background:#019be1; 
border:2px solid #019be1; 
background: -moz-linear-gradient(1a75d6, #019be1); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #019be1),color-stop(1, #1a75d6));  
background: -webkit-linear-gradient(#1a75d6, #019be1); 
background: -o-linear-gradient(#1a75d6, #019be1); 
background: -ms-linear-gradient(#1a75d6, #019be1); 
background: linear-gradient(#1a75d6, #019be1Fwc); 
}

источник

2013-06-15 Arif Reza

упоминание overflow:hidden в ".ejz_wc_main" будет решать ваши проблемы.

.ejz_wc_main { 
    background: none repeat scroll 0 0 green; 
    border-radius: 10px 10px 10px 10px; 
    font-family: 'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
}

здесь работает код jsFiddle File

источник

2013-06-15 05:06:19

Используйте этот Css код для первых двух классов ...

.ejz_wc
{
ширина: 900px;
margin: auto;
высота: авто;
}

.ejz_wc_main
{
семейство шрифтов: «Segoe UI», «Tahoma Жирный», «Arial Жирный», «Helvetica Жирный», без засечек;
высота: 100%;
border-radius: 10px;
-moz-border-radius: 10px;
ширина: 100%;
background: # f4f4f4;
float: слева;
}

Ha Ha Ha

источник

2013-06-15 05:23:02

Прохладный вещь clearfix метод. Я использую его в вашем коде есть CSS для этого класса

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

Добавить .clearfix нижестоящего элемента, которые имеют ребенка с поплавком.

<div class="ejz_wc_main clearfix" id="ejz_wc_main"></div>

Вот демо для Вас

http://jsfiddle.net/ppqCD/1/

источник

2013-06-15 09:56:46

div высота не отображается правильно

ответ

Смежные вопросы