如何让子div始终适合父div？

我的问题是，如果有一种方法，不使用JavaScript，导致子div扩展到他们的父母的边界，没有超过这些边界，当你不能事先知道父div的大小？如何让子div始终适合父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>

来源

2009-07-08 Tim Sheiner

你可以使用继承

#one {width:500px;height:300px;} 
#two {width:inherit;height:inherit;} 
#three {width:inherit;height:inherit;}

来源

2009-07-08 14:01:03 Silfverstrom

我不认为作品。那么，至少如果这些是你做出的唯一改变。 – thebrokencube 2009-07-08 14:07:15

使用这些样式时，我无法观察到原始的任何更改。 – 2009-07-08 17:41:21

在你的榜样，你不能：在5px margin被添加到div#two和div#three边框有效地使他们的宽度和高度100 ％的父+ 5px，这将溢出。

您可以在父元素使用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>

编辑：在测试中，去除div#two的width:100%实际上会让它正常工作为div s为块并且默认情况下会始终填充父母的宽度。如果您想使用保证金，这应该会清除您的第一个案例。

来源

2009-07-08 14:06:43 ajm

或者，坚持百分比：在使用相同的“单位”时，使用百分比保证金和百分比宽度/高度也可以解决问题。但是，100％的身高会让你受益，因为还有另一个孩子在使用部分父母的身高。 – ajm 2009-07-08 14:14:09

这不起作用，#three中的高度：100％将始终溢出父容器。 – 2009-07-08 14:17:33

是的，正如我在评论中所说的那样，100％的高度每次都会溢出。像#two和#three的2％边距，#two的10％高度以及#three的82％高度可能会起到诀窍的作用。 – ajm 2009-07-08 15:34:50

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

#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; }

设定的尺寸（高度/宽度）和溢流到自动或隐藏在父元素使其包含任何浮动的子元素。

请注意，overflow：hidden;有时可能会导致与内容问题被截断，在这种情况下，你可能会想尝试这种替代方法：

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

来源

2009-07-08 14:08:27

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

身高并不那么简单。你可以做一些像equal height column trick。

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-08 14:10:56

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

来源

2009-07-16 19:55:59

如果您希望子div适合父级大小，您应该至少在子div的子边框的大小（child.margin >= child.bordersize）上放置一个边距。

对于此示例，只需删除宽度：100％;和高度：100％在＃一个并删除宽度：100％在#two。它应该是这样的：

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-11 20:13:17 Wade

我也有类似的问题，但对我来说，我在我的div内容的高度方向将超过父div的边界。当它的时候，我想让它自动滚动。我能够通过使用

.vscrolling_container { height: 100%; overflow: auto; }

来源

2011-04-11 22:18:33 meem

它最后尝试将是好的。但如果y尝试插入文Y会看到文本将超过边界

来源

2013-02-11 16:39:46 ABA

你可以使用display: inline-block;

希望它是有用的。

来源

2013-10-28 09:48:09

常用的有此两种技术：

绝对定位
表格样式

鉴于你在这里提供的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> 
 
\t <div id="one" class="border"> 
 
\t \t <div id="two" class="border margin"></div> 
 
\t \t <div id="three" class="border margin"></div> 
 
\t </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> 
 
\t <div id="one"> 
 
\t  <div id="two"> 
 
      <div id="four"></div> 
 
     </div> 
 
     <div id="three"> 
 
      <div id="five"></div> 
 
      <div id="six"></div> 
 
     </div> 
 
\t </div> 
 
    </html>

来源

2016-09-14 17:07:38 Ryan

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

.outer { 
    /* ... */ 
    height: auto; 
    overflow: hidden; 
    /* ... */ 
}

来源

2017-07-10 01:41:44

如何让子div始终适合父div？

回答

相关问题