Html 如何使绝对定位的 div 的宽度等于它的父级减去一些边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9368836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a absolute positioned div have a width equal to it's parent minus some margin
提问by Jeremy Smith
I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container. I've included some example css below to try to get the point across.
我想要一个内部 div，它位于不同大小的容器 div 内，并从固定的左侧位置开始，然后具有填充容器其余部分的宽度。我在下面包含了一些示例 css 来尝试理解这一点。
I have to use absolute positioning so can't just float right and set a left-margin. Any ideas of how to make this work with absolute positioning? I've also tried width: auto and some different box-sizing options.
我必须使用绝对定位，所以不能只是向右浮动并设置左边距。关于如何使用绝对定位进行这项工作的任何想法？我也试过 width: auto 和一些不同的 box-sizing 选项。
To clarify, the trickiness of this is that the left border has to be fixed, and the left border has to be against the right border of the container. I can't use position: relative, and javascript, but I'd probably end up making .inner1 and .inner2 divs with hard-coded widths before doing that. But hoping to avoid that.
澄清一下，这个问题的棘手之处在于必须固定左边框，而左边框必须紧靠容器的右边框。我不能使用 position: relative 和 javascript，但在这样做之前，我可能最终会使用硬编码宽度制作 .inner1 和 .inner2 div。但希望避免这种情况。
.container1 {
position: relative;
width: 400px;
height: 300px;
}
.container2 {
position: relative;
width: 500px;
height: 300px;
}
.inner {
position: absolute;
top: 0px;
left: 200px;
height: 100%;
width: 100%;
}
回答by animuson
Just specify all of the top, left, bottom, and rightproperties and the box will expand to be at all of those points.
只要指定所有的top，left，bottom，和right属性和框将扩大到在所有这些点。
.container {
position: relative;
width: 400px;
height: 300px;
}
.inner {
position: absolute;
top: 0;
left: 200px;
bottom: 0;
right: 0;
}
回答by haZard0us
I don't get what exactly do you need but why don't you use percentages?
我不明白你到底需要什么，但你为什么不使用百分比？
Instead of:
代替：
.inner {
position: absolute;
top: 0px;
left: 200px;
height: 100%;
width: 100%;
}
Why don't you use something like:
你为什么不使用类似的东西：
.inner {
position: absolute;
top: 0px;
left: 50%;
height: 100%;
width: 50%;
}
Setup percentages for left and width attribute accordingly. 40-60, 30-70 and so on.
相应地设置左和宽度属性的百分比。40-60、30-70等。
Hope this helps. If not, please specify a little more.
希望这可以帮助。如果不是，请指定多一点。
Regards
问候
回答by tkone
This works. Change the width of the outer box to whatever you want and the inner box grows to match it.
这有效。将外框的宽度更改为您想要的任何宽度，内框会增大以匹配它。
.container {
width: 400px;
height: 300px;
}
.inner {
position: relative;
margin-left: 200px;
height: 100%;
}
Edit: here's a fiddle
编辑：这是一个小提琴
