Question

我有一个包含

的HTML页面

<div id="logo"></div>
<div id="content">
    <div id="transparncy"></div>
    <div id="contentdata">
        <div id="left">Contents  </div>
        <div id="right">Contents </div>
        </div>
    </div>
</div>
<div id="footer">Footer</footer>

和CSS

#content {
margin-left:10%;
margin-top:20px;
width:80%;
position:relative;  
color:#37475e;
}

#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);  
-moz-opacity:0.4;   
background-color:#fff;  
width:100%;  
min-height:430px; 
height:auto;
position:absolute;  
top:0px;  
left:0px;  
z-index:-1;
border-radius:5px;
overflow:hidden;
}

#contentdata {
position:relative;  
width:100%;
margin:2%;
padding:1%;
}

#left {
width:60%;
float:left;
}

#right {
float:right;
width:35%;
}

#footer {
position:absolute;
clear:both;
width:100%;
}

我有两个问题，http://jsfiddle.net/wED4p/1/

height: auto透明div（#transparency）无效
#footer始终放在div#transperancy

Answer 1

Your fiddle

我已经在css中编辑了一些代码，只需检查一次。

#footer {
position:relative;
clear:both;
width:100%;
overflow:auto;
}

update 1 fiddle

Answer 2

这是你修改过的小提琴，

FIDDLE

#contentdata {
    width:90%;
    margin:10px;
    padding:1%;
    position: relative;
}

#transparncy {
    opacity: 0.4;
    filter:alpha(opacity=40);  
    -moz-opacity:0.4;
    background-color:blue;  
    width: 100%;
    height: 100%;
    position: absolute;
}

根据内容自动调整div的高度

2 个答案: