Question

目标是设置表格中的第二个div（ divRestOfHeight ），取屏幕的其余高度我试图用“高度：100％;位置绝对”来做到这一点，但是它设置了屏幕的所有高度而不仅仅是休息... ...

我已经看过javascript的例子，但我想知道是否有办法只用css。

查看：

<div id="divMain">
    <div>
        <table id="tTable">
                <tr>
                    <td>                            
                        <div id="divFixedHeight" style="height:200px;background-color: red;width: 100%;position: absolute;">

                        </div>
                    </td>
                </tr>            
                <tr>
                    <td>                        
                        <div id="divRestOfHeight" style="background-color:pink">                    

                        </div>
                    </td>
                </tr>
            </table>

    </div>
</div>

Answer 1

你的意思是你想让它溢出divMain到浏览器窗口的底部，或者你想让它填充divMain中的剩余空间？

据我所知，如果他们不填充页面，它将嵌入div标签中，不会填充浏览器的其余部分。

尝试增加divMain的高度或使底部边距为0px以拉伸它。

Answer 2

此代码完成了您的目标

<body style="padding: 0; margin: 0;">
  <div id="divMain" style="height: 100%;">                          
    <div id="divFixedHeight" style="height:200px;background-color: red;width: 100%;position: absolute;"></div>                      
    <div id="divRestOfHeight" style="background-color:green; height: 100%;"></div>
  </div>
</body>

或者你真的需要那些桌子吗？它确实看起来像丑陋的HTML：/

Answer 3

要将块元素设置为屏幕高度的100％，您还必须将其所有父级的高度设置为100％高度。

例如，假设您有以下内容：

<div class="parent">
   <div class="child">
       some content
   </div>
</div>

要使.child具有100％的高度，.parent也必须设置为100％的高度。像这样：

html,
body,
.parent,
.child { height: 100%; }

设置div高度与浏览器高度的其余部分一样

3 个答案: