0

私は次のセットアップを持っています

HTML:

<div id="resizable">
    <div id="fixHeightTop">Whatever</div>
    <div id="problematicDiv">Whatever</div>
    <div id="semiProblematicDiv">Whatever</div>
    <div id="fixHeightBottom">Whatever</div>
</div>

CSS:

#resizable {
    position: relative;
}

#fixHeightTop {
    position: relative;
    height: 10px;
}

#fixHeightBottom {
    position: absolute;
    height: 10px;
}

#problematicDiv {
    position: relative;
    float: left;
    width: 80%;
    overflow: auto;
}

#semiProblematicDiv {
    position: relative;
    float: right;
    width: 20%;
    overflow: auto;
}

#resizable div はサイズ変更可能 (jQuery) です。私がする必要があるのは、 problemDiv と semiProblematicDiv に 100% に等しい高さ - fixHeightTop 高さ - fixHeightBottom 高さを与えて、サイズ変更可能な要素の高さ全体に拡張できるようにすることです。問題は、それを行う方法を理解できないことです。height: 100% を使用すると、一番下の要素に重なってしまいます。

それを行う方法はありますか？

4

2 に答える 2

1

私があなたを正しく理解していれば、高さを固定した 2 つの div を作成し、他の 2 つの div ショーが残りの高さを占めるようにする必要があります。これがあなたが望むものなら、ここにそれを行う方法があります。

#resizable {
   height: 80px; //this is changed by JQuery, right?
}

#fixHeightTop {
   height: 20px;
}

#fixHeightBottom {
   height: 20px;
}

#problematicDiv {
   position: relative;
   float: left;
   width: 80%;
   overflow: auto;
   height: 100%; //this helps the div taking up the space
}

#semiProblematicDiv {
   position: relative;
   float: right;
   width: 20%;
   overflow: auto;
   height: 100%; //this helps the div taking up the space

}

于 2012-11-29T13:25:38.407 に答える
0

アイデアがあります、使ってみてくださいposition:absolute;

#problematicDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  height: 100%; // Now you can apply height 100%
  overflow: auto;
}

#semiProblematicDiv {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20%;
  height: 100%; // Now you can apply height 100%
  overflow: auto;
}

幸運を

于 2012-11-29T13:21:23.717 に答える