How to make child divs always fit inside parent div?

后端未结

关注

 11  635

My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot kn

相关标签:

11条回答

野趣味

2020-12-08 09:28

you could use inherit

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

0 讨论(0)

暗喜

2020-12-08 09:31
If I've understood you correctly, the easiest method is to float the children. For example:
```
#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; }
```
Setting a dimension (height/width) and overflow to auto or hidden on the parent element causes it to contain any floated child elements.

Note that overflow:hidden; can occasionally cause problems with content getting cut off, in which case you might want to try this alternative method:

http://www.positioniseverything.net/easyclearing.html
0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-12-08 09:31
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs (child.margin >= child.bordersize).

For this example, just remove the width:100%; and the height:100% in #one and remove the width:100% in #two. It should be something like this:
```
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%;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2020-12-08 09:33
For width it's easy, simply remove the width: 100% rule. By default, the div will stretch to fit the parent container.

Height is not quite so simple. You could do something like the 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;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2020-12-08 09:36

There are two techniques commonly used for this:

Absolute Positioning
Table Styles

Given the HTML you provided here is the solution using Absolute positioning:

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

You can always just use the table, tr, and td elements directly despite common criticisms as it will get the job done. If you prefer to use CSS there is no equivalent for colspan so you will likely end up with nested tables. Here is an example:

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>

0 讨论(0)

迷失自我

2020-12-08 09:37

I think I have the solution to your question, assuming you can use flexbox in your project. What you want to do is make #one a flexbox using display: flex and use flex-direction: column to make it a column alignment.

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>

0 讨论(0)

1 2 下一页