如何让DIV占据页面的剩余部分？

发布于 2024-09-11 08:48:05 字数 364 浏览 3 评论 0原文

我有以下 HTML：

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

如何使 large_div 占据页面高度的其余部分？

这是该页面的 CSS：

html { height: 100%; }
body { height: 100%; }
#large_div {
    /* ??? */
}

原文

I have the following HTML:

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

How can I make the large_div take up the rest of the page height?

Here is the CSS for the page:

html { height: 100%; }
body { height: 100%; }
#large_div {
    /* ??? */
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不羁少年 2024-09-18 08:48:05

您可以尝试在 #large_div 上设置一个等于 h2 高度的负边距。不幸的是，这不会是非常可靠的代码，因为 h2 高度会根据文本长度和浏览器而变化：

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

不过，一点 jQuery 可以帮助您解决问题：

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

You could try setting a negative margin on the #large_div that was equal to the height of the h2. Unfortunately this will not very solid code since that h2 height will change depending on text length and browser:

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

A bit of jQuery would sort you out though:

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

回复收藏 0 原文

伤痕我心 2024-09-18 08:48:05

那么，您基本上想要一个表格布局吗？这是 CSS 中最令人讨厌的事情之一。您可能会考虑退回到老式 HTML 表格，但如果您不关心 IE6/ 7 支持，那么您还可以使用 table、table-row 以及最终 table- 的 display 属性进行尝试单元格。

这是一个 SSCCE，复制、粘贴并运行它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>

再次强调，这仅适用于符合 CSS2 的浏览器。

如果您想要实现的只是为 div 提供漂亮的背景，那么还有更好的解决方案。

So, you basically want a table layout? This is one of the nastiest things in CSS. You might consider to fall back to old fashioned HTML tables, but if you don't care about IE6/7 support, then you can also play around using display attributes of table, table-row and eventually table-cell.

Here's an SSCCE, copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>

Again, this works in decent CSS2-adhering browsers only.

If all you want to achieve is to give the div a nice background, then there are nicer solutions.

回复收藏 0 原文

风向决定发型 2024-09-18 08:48:05

如果您知道顶部 div 的高度（在本例中为 h2），您也许可以尝试如下操作：

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

不幸的是，我无法从我现在所在的位置测试它，所以这可能会很遥远。 ..但我相信我以前使用过类似的东西并且具有类似的效果。

通过使用这些 css 属性，您也许能够找到您的解决方案 - 或者至少找到一个“足够好”的解决方案......

祝您好运！

If you knew the height of the top div (or h2 in this case), you might be able to try something like the following:

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

Unfortunately, I can't test this from where I am right now, so this could be way off... But I believe I've used something similar to this before and it had a similar effect.

You may be able to find your solution - or at least a "good enough" solution, by playing around with those css properties...

Good luck!

回复收藏 0 原文

笑脸一如从前 2024-09-18 08:48:05

html,body {height:100%;border:0px;margin:0px;padding:0px;}

#large_div {height:100%;margin:0px;}

html,body {height:100%;border:0px;margin:0px;padding:0px;}

#large_div {height:100%;margin:0px;}

回复收藏 0 原文

~没有更多了~

关于作者

青春有你

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

如何让DIV占据页面的剩余部分？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如何让DIV占据页面的剩余部分？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。