73

我的问题是，当您无法事先知道父 div 的大小时，是否有办法在不使用 JavaScript 的情况下使子 div 扩展到其父级的边界而不超出这些边界？

下面是展示我的问题的示例标记/样式。如果将其加载到浏览器中，您将看到它们#two都#three延伸到其父级之外#one，并导致出现滚动条。

我的问题不是滚动条，而是我不知道如何告诉子 div 占据它们剩余的宽度或高度，而不是父级的完整高度或宽度。

<html>
    <head>
        <style>
            html, body {width:100%;height:100%;margin:0;padding:0;}
            .border {border:1px solid black;}
            .margin { margin:5px;}
            #one {width:100%;height:100%;}
            #two {width:100%;height:50px;}
            #three {width:100px;height:100%;}
        </style>
    </head>
    <body>
        <div id="one" class="border">
            <div id="two" class="border margin"></div>
            <div id="three" class="border margin"></div>
        </div>
    </body>
</html>
4

11 回答 11

25

我遇到了类似的问题，但在我的情况下，我的 div 中的内容高度会超过父 div 的边界。当它发生时，我希望它自动滚动。我能够通过使用来实现这一点

.vscrolling_container { height: 100%; overflow: auto; }
于 2011-04-11T22:18:33.533 回答
20

你可以使用display: inline-block;

希望它是有用的。

于 2013-10-28T09:48:09.460 回答
10

在您的示例中，您不能：将5px margin其添加到边界框div#two并div#three有效地使其宽度和高度为父级 + 5px 的 100%，这将溢出。

您可以padding在父元素上使用以确保5px其边框内有空间：

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

编辑：在测试中，删除width:100%fromdiv#two实际上会让它正常工作，因为divs 是块级的，并且默认情况下总是填充其父级的宽度。如果您想使用保证金，那应该清除您的第一个案例。

于 2009-07-08T14:06:43.650 回答
6

有两种常用的技术：

  1. 绝对定位
  2. 表格样式

鉴于您在此处提供的 HTML 是使用绝对定位的解决方案：

body #one {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}
body #two {
  width: auto;  
}
body #three {
  position: absolute;
  top: 60px;
  bottom: 0;
  height: auto;
}
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
	<div id="one" class="border">
		<div id="two" class="border margin"></div>
		<div id="three" class="border margin"></div>
	</div>
</body

尽管受到普遍批评，您始终可以直接使用 table、tr 和 td 元素，因为它可以完成工作。如果您更喜欢使用 CSS，则 colspan 没有等价物，因此您最终可能会使用嵌套表。这是一个例子：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#one {
  box-sizing: border-box;
  display: table;
  height: 100%;
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}
#two {
    box-sizing: border-box;
    display: table;
    height: 50px;
    padding: 5px;
    width: 100%;
}
#three {
  box-sizing: border-box;
  display: table;
  height: 100%;
  padding-bottom: 60px;
  padding-left: 5px;
  
}
#four {
  display: table-cell;
  border: 1px solid black;
}
#five {
  display: table-cell;
  width: 100px;
  border: 1px solid black;
}
#six {
  display: table-cell;  
}
<html>
	<div id="one">
	    <div id="two">
            <div id="four"></div>
        </div>
        <div id="three">
            <div id="five"></div>
            <div id="six"></div>
        </div>
	</div>
  </html>

于 2016-09-14T17:07:38.033 回答
4

对于宽度很容易，只需删除width: 100%规则。默认情况下，div将拉伸以适应父容器。

身高不是那么简单。您可以执行等高列技巧之类的操作。

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
于 2009-07-08T14:10:56.657 回答
2

你可以使用继承

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
于 2009-07-08T14:01:03.813 回答
2

确保最外面的 div 具有以下 CSS 属性：

.outer {
  /* ... */
  height: auto;
  overflow: hidden;
  /* ... */
}
于 2017-07-10T01:41:44.420 回答
1

如果我的理解正确，最简单的方法是让孩子们漂浮。例如：

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }

在父元素上将尺寸（高度/宽度）和溢出设置为自动或隐藏会导致它包含任何浮动的子元素。

注意溢出：隐藏；有时会导致内容被截断的问题，在这种情况下，您可能需要尝试以下替代方法：

http://www.positioniseverything.net/easyclearing.html

于 2009-07-08T14:08:27.050 回答
1

为了结束，我认为这个问题的答案是没有解决方案。获得我想要的行为的唯一方法是使用 javascript。

于 2009-07-16T19:55:59.203 回答
1

我想我有你的问题的解决方案，假设你可以在你的项目中使用 flexbox。您要做的是使用并使用使其成为列对齐方式来制作#one一个 flexbox 。display: flexflex-direction: column

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

.border {
  border: 1px solid black;
}

.margin {
  margin: 5px;
}

#one {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#two {
  height: 50px;
}

#three {
  width: 100px;
  height: 100%;
}
<html>

<head>
</head>

<body>
  <div id="one" class="border">
    <div id="two" class="border margin"></div>
    <div id="three" class="border margin"></div>
  </div>
</body>

</html>

于 2019-03-20T17:23:13.957 回答
0

如果您希望子 div 适合父大小，则应在子 div ( child.margin >= child.bordersize) 上放置至少为子边框大小的边距。

对于此示例，只需删除width:100%; 和 #one 中的height :100%并删除#two中的width:100%。它应该是这样的：

html, body {width:100%; height:100%; margin:0; padding:0;}    
.border {border:1px solid black;}   
.margin {margin:5px;}  
\#one {}   
\#two {height:50px;}    
\#three {width:100px; height:100%;}
于 2011-02-11T20:13:17.633 回答