0

目标是在名为 ( divRestOfHeight )的表中设置第二个 div以获取屏幕的其余高度我试图用“height:100%; position absolute”来做这件事，但它将该 div 设置为屏幕的所有高度和不只是休息...

我已经看到了 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>
4

3 回答 3

1

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

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

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

于 2013-02-25T15:32:52.000 回答
1

这段代码做你所追求的

<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：/

于 2013-02-25T15:56:29.343 回答
1

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

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

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

要使高度为.child100%，还.parent必须设置为 100% 高度。像这样：

html,
body,
.parent,
.child { height: 100%; }
于 2013-02-25T16:19:26.390 回答