Question

我有一个CSS问题。我认为这很简单而且很平常，但我知道为什么我无法做到这一点。

我试图让div高度占据另一个div的剩余高度。

我有3个div

 <div id='div1'>
    <div id='div2'>
    </div>
       <div id='div3'>

   </div>
</div>

CSS：

 #div1{position:fixed;top:0px;right:0px;width:250px;height:100%;}
 #div2{width:100%;height:250px;float:left;}
 #div3{}   // now I want this div to take the remaining height with only CSS and I don't want to use flex.

我认为剩下的宽度需要这个代码的div。

CSS

{width:auto;overflow:hidden;}

这将占用div的所有剩余宽度，但相同的代码不适用于高度。

请建议我这件事。

Answer 1

height: calc(100% - 250px);

你可以在你的CSS中使用div3。希望这会有所帮助（：

Answer 2

你应该尝试使用CSS，如下所示＃div3（我已经改进了答案，因为现在#div3不在#div2中，但实际上#div2和#div3在＃div1中）

#div3 {
 width:100%;
 height:100vh;
}

Answer 3

你可以这样做：

#div1 {
  position: fixed;
  background: green;
  top: 0px;
  right: 0px;
  width: 250px;
  height: 100%;
}

#div2 {
  position: absolute;
  background: red;
  width: 100%;
  height: 250px;
}

#div3 {
  position: absolute;
  top: 250px;
  background: blue;
  width: 100%;
  height: 1000px;
  overflow: hidden;
}

DIV 3获得非常高的高度值，但会被overflow: hidden

自动切断

这是一个codepen：http://codepen.io/anon/pen/XXjBJR

div高度取剩余高度

3 个答案: