我有一个div元素,里面有两个div元素,内部div是浮动的。但我希望主要的div具有自动高度。不固定。并且背景必须正确显示。当我将高度设置为250px
时,背景显示为仅250px区域。但当我将高度设置为auto
时,背景未显示。如何使用自动高度显示背景?
我的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);
}
答案 0 :(得分:3)
提及“.ejz_wc_main”中的overflow:hidden
将解决您的问题。
.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
答案 1 :(得分:1)
为前两个类使用此Css代码......
.ejz_wc
{
宽度:900px;
保证金:汽车;
的高度:汽车; 强>
}
.ejz_wc_main
{
font-family:'Segoe UI','Tahoma Bold','Arial Bold','Helvetica Bold',sans-serif;
高度:100%;
边界半径:10px的;
-moz-边界半径:10px的;
宽度:100%;
背景:#f4f4f4;
的浮动:左强>
}
哈哈哈
答案 2 :(得分:1)
酷的东西是clearfix方法。我在你的代码中使用它,这个类有一个css
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
在父元素上添加.clearfix,其子元素为float。
<div class="ejz_wc_main clearfix" id="ejz_wc_main"></div>
以下是您的演示