0

我尝试让水平 div 填充容器的所有空白空间。

我没有成功让中间 div ( .element-description) 填补所有空白（如高度：自动）。（所有其他 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; 
}

没有桌子的小提琴

摆弄展示桌

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

4

2 回答 2

0

为什么需要将 position: absolute 设置为 .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;
}
于 2013-07-29T15:09:43.393 回答
0

这里的固定值必须是页眉和页脚的高度，并且您需要将内容部分的顶部和底部设置为相同的页脚和页眉高度值加上此处的边框宽度值（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;
}
于 2013-09-27T15:36:47.723 回答