Question

我尝试使用水平div来填充容器的所有空白区域。

我没有成功使中间div（.element-description）填补所有空位（如高度：auto）。（所有其他div都有一个定义的高度）我试过display:table，它接近工作，但在IE9中创建了一些显示错误。我尝试使用css calc，但它不是跨浏览器，并没有解决所有问题。

我真的不知道该怎么办。也许这在css中是不可能的？

的CSS：

.element{
  position: absolute;
  overflow: hidden;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 400px;
  height: 500px;
  background: grey;
}
.element-back {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.title {
  position: relative;    
  overflow: hidden;
  width: 100%;
  height: 40px;
  border: 1px solid black;
  box-sizing: border-box;
  line-height: 40px;
}
.element-title-separator {
    position: relative;
    overflow: hidden;
    height: 2px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
    position: relative;
    overflow: hidden;
    min-width: 100%;
    height: 14.5%;
    opacity: 0.8;
}
.element-image img{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: -30%;
}
.element-description {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
.element-description > div{
    position: relative; 
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.element.blog .element-description > div > div{
    overflow: hidden; 
    position: absolute; 
    height:100%;
}
.element-read-more {
    position: relative;
    overflow: hidden;
    min-width: 100%;
    min-height: 40px;
}
.element-informations {
    position: relative;
    overflow: hidden;
    min-width: 100%;
    min-height: 40px; 
}

fiddle without table

fiddle with display table

希望有人可以帮助我...

Answer 1

为什么需要将位置：绝对设置为.element？你不能把它设置为相对和使用高度：自动？这是你正在尝试的吗？

http://jsfiddle.net/jonigiuro/UuFSg/262/

.element{
  position: relative;
  overflow: hidden;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 400px;
  height: auto;
  background: grey;
}

Answer 2

此处的固定值必须是页眉和页脚高度，您需要将内容部分的顶部和底部设置为相同的页脚值和页眉高度加上边框的值-width here（100px + 5px）。我希望它有所帮助

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}

h1, h2, a {
    color:orange;
}

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

.box{
    border: 5px solid green;

}

#container{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    min-width: 60%;
    min-height: 400px;
    width: 1024px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: none;
    bor
}

/** Test html classic page */
#header{
    display:block;
    overflow: visible;
    width: auto;
    height: 100px;
    margin: 0; padding: 0;
}
#content{
    position: absolute;

    /** The border over lap so 5px must be add*/
    top: 105px; bottom: 105px;
    right: 0; left: 0;
}
#footer{
    position: absolute;
    overflow: visible;
    height: 100px;
    right: 0; left: 0; bottom: 0;
    margin: 0; padding: 0;
}

两个div之间的css相对div高度auto

2 个答案: