在 CSS 中使用百分比大小和填充时，无法防止嵌套 Div 溢出吗？

发布于 2024-08-29 17:39:02 字数 1559 浏览 4 评论 0原文

我希望能够使用以下属性布局嵌套 div：

width: 100%
height: 100%
padding: 10px

我希望它是这样，子项的宽度和高度是计算填充之后（而不是计算之前）剩余空间的 100%。否则，当我有如下例所示的文档时，子项会使滚动条出现。但滚动条不是主要问题，子容器拉伸超出父容器的宽度才是主要问题。

我可以使用所有 position:absolute 声明，但这似乎不对。这是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Liquid Layout</title>
    <style>
      body, html {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color:black;
      }
      #container {
        position:relative;
        width:100%;
        height:100%;
        background-color:red;
        opacity:0.7;
      }
      #child1 {
        position:relative;
        width:100%;
        height:100%;
        padding:10px;
        background-color:blue;
      }
      #nested1 {
        position:relative;
        background-color: white;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1">
        <div id="nested1"></div>
      </div>
    </div>
  </body>
</html>

如何做到这一点，使用 position:relative 或 position:static 和百分比大小，根据父级宽度/的百分比大小高度减去内边距和边距？我是否必须求助于 position:absolute 和左/右/上/下？

感谢您的帮助，槊

原文

I want to be able to layout nested divs with these properties:

width: 100%
height: 100%
padding: 10px

I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before. Otherwise, when I have a document like the below example, the child makes the scrollbars appear. But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.

I can use all position: absolute declarations, but that doesn't seem right. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Liquid Layout</title>
    <style>
      body, html {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color:black;
      }
      #container {
        position:relative;
        width:100%;
        height:100%;
        background-color:red;
        opacity:0.7;
      }
      #child1 {
        position:relative;
        width:100%;
        height:100%;
        padding:10px;
        background-color:blue;
      }
      #nested1 {
        position:relative;
        background-color: white;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1">
        <div id="nested1"></div>
      </div>
    </div>
  </body>
</html>

How do I make it so, using position:relative or position:static, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins? Do I have to resort to position:absolute and left/right/top/bottom?

Thanks for the help,
Lance

分享到QQ

分享到微博

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

发布评论

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

一绘本一梦想 2024-09-05 17:39:02

我希望它是这样的，子级是计算填充之后剩余空间的 100% 宽度和高度，而不是之前。

一个闪亮的未来方法是：

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

然而，这在版本 8 之前的 IE 上不起作用。

我必须诉诸position:absolute和左/右/上/下吗？

这是另一种方式，但“边缘定位”（定位 top 和 bottom 但不是 height，对于 left 也类似/right/width) 在版本 7 之前的 IE 上不起作用。

滚动条不是主要问题，子容器拉伸超出父容器的宽度才是主要问题。

横向看不是问题。将 width 保留为默认的 auto ，它将接收其父级减去填充的完整宽度。唯一的问题是您无法通过 height 获得这种行为。

混合方法：auto-width、100% height 和 box-sizing，并添加一些 hack JS只能在 IE6-7 中运行才能修复那里的高度？

I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before.

The shiny futuristic way to do that is:

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

However this won't work on IE before version 8.

Do I have to resort to position:absolute and left/right/top/bottom?

That's another way, but ‘edge positioning’ (positioning top and bottom but not height, and similarly for left/right/width) won't work on IE before version 7.

the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.

Horizontally it's not a problem. Leave width at default auto and it will receive the full width of its parent minus the paddings. The only problem is you don't get that behaviour with height.

A hybrid approach: auto-width, 100% height with box-sizing, and add some hack JS that only runs in IE6-7 to fix up the height there?

回复收藏 0 原文

~没有更多了~