简单的 CSS 布局

发布于 2024-09-11 21:18:25 字数 939 浏览 3 评论 0原文

我需要找到一种跨浏览器的方式，将两个 div 包含在父 div 中，其中第一个子 div 具有固定高度，第二个 div 向下流动以包含在父 div 中。

     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

因此，父级的固定高度为 500px，标题 div 的固定高度为 20px，但主体 div 的高度必须向下流动以适合父级。将其高度设置为 100% 会使它的高度溢出 20px，因为 height:100% 使用父母的高度，而不考虑孩子的高度。我看到了一个使用绝对位置的解决方案，但这在 IE7 或 6 上不起作用。是否有跨浏览器解决方案，因为它是一个相对简单的布局？

编辑：忘记提及父级将可调整大小，因此并不总是 500px。使用 jquery 可调整大小，父维度可以是任何内容，并且会经常更改。

编辑2：我希望我能将这个解决方案归功于多个人，因为我听取了每个人的建议。基本上，我给 #body 的高度为 480px，并使用 resizing 中的alsoResize 选项来调整父级和主体的大小。

原文

I need to find a cross browser way of having two divs contained in a parent div where the first child has a fixed height and the second flows down to be contained in the parent.

<div id="parent"><div id="header"></div><div id="body"></div></div>

     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

So the parent has a fixed height of 500px, the header div has a fixed height of 20px but the body div's height must flow down to fit inside the parent. Giving it a height of 100% overflows it's height by 20px because height:100% uses the parents height not taking into account the children. I saw a solution using position absolute but this does not work on IE7 or 6. Is there a cross browser solution for this as it is a relatively simple layout?

Edit: Forgot to mention that the parent will be resizable so will not always be 500px. Using jquery resizable, the parent dimensions could be anything and will change often.

Edit 2: I wish I could credit multiple people for this solution as I took advice from everyone. Basically I gave #body a height of 480px and used the alsoResize option in resizable to resize the parent and the body.

分享到QQ

分享到微博

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

发布评论

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

悸初 2024-09-18 21:18:25

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

控制 child2 的高度，而不是动态设置父级的大小。

希望这就是您所要求的。

编辑：根据您的更新进行编辑！

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

Instead of setting the size of the parent dynamically, control child2's height.

Hope that is what your asking for.

Edit: Edited as per your update!

回复收藏 0 原文

堇年纸鸢 2024-09-18 21:18:25

如果您已经知道外部容器的高度以及内部分区的高度，我认为您可以知道剩余 div 的高度。

尝试这样的height: 480px;。保持简单易行

回复收藏 0 原文

半夏半凉 2024-09-18 21:18:25

不幸的是，这个问题并不像您想象的那么简单。您可以使用一些 JavaScript 来根据 parent 的计算高度更改 body 的高度。

但最简单的事情可能是将 body 的高度设置为 100%，并在 parent div 上设置 overflow: hide。

这样，主体的高度将等于父级，但底部 20 像素将被剪掉。这可能是可接受的，也可能是不可接受的，具体取决于您对 body 执行的操作，以及其内容是否可能到达底部。

另一种方法是使用：

#header { height: 20px; }
#body { height: 480px; }
#parent { height: auto; }

并让 body 成为由脚本调整大小的主体，而不是 parent。 parent 将自动调整大小以包围 header + body 的总高度。

Unfortunately, this isn't as simple a problem as you think it ought to be. You can use some javascript to change the height of body based on parent's computed height.

But the simplest thing may be to just set bodys height to 100%, and set overflow: hidden on the parent div.

This way the body will have a height equal to the parent, but the bottom 20px will just be clipped. This may or may not be acceptable, depending on what you're doing with the body, and whether its content will potentially reach the bottom.

Another approach would be to use:

#header { height: 20px; }
#body { height: 480px; }
#parent { height: auto; }

and have body be the one that gets resized by the script, rather than parent. parent will automatically be sized to surround the total height of header + body.

回复收藏 0 原文

咋地 2024-09-18 21:18:25

我对父级具有动态高度的页面的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
            }

            #parent {
                height: 80%;
                width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 120px;
                background-color: #456;
                position: relative;
                z-index: 101;
            }

            #body {
                height: 100%;
                margin-top: -120px;
                background-color: #789;
                position: relative;
                z-index: 100;
            }

            #spacer {
                height: 120px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="header"></div>
            <div id="body">
                <div id="spacer"><!-- Padding will just increase body's height. --></div>
                Body content.
            </div>
        </div>
    </body>
</html>

My solution for a page where parent has a dynamic height:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
            }

            #parent {
                height: 80%;
                width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 120px;
                background-color: #456;
                position: relative;
                z-index: 101;
            }

            #body {
                height: 100%;
                margin-top: -120px;
                background-color: #789;
                position: relative;
                z-index: 100;
            }

            #spacer {
                height: 120px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="header"></div>
            <div id="body">
                <div id="spacer"><!-- Padding will just increase body's height. --></div>
                Body content.
            </div>
        </div>
    </body>
</html>

回复收藏 0 原文