0

コンテナーのすべての空きスペースを埋めるために、水平 div を使用しようとしています。

中央の div ( .element-description) を作成して空のギャップをすべて埋めることができませんでした (height: 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; 
}

テーブルのないフィドル

ディスプレイテーブルをいじる

誰かが私を助けてくれることを願っています...

4

2 に答える 2

0

position: absolute を .element に設定する必要があるのはなぜですか? 相対的に設定して、height:auto を使用することはできませんか? これはあなたがしようとしているものですか？

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 に答える