如何使CSS宽度填充父？ [英] How to make CSS width to fill parent?

问题描述

我有以下标记：

 < div id =foo> 
< div id =bar> 
这里是dragons 
< / div> 
< / div> 
  

我的愿望是让foo宽度为 600px （ width：600px; ）并使bar具有以下行为：

 code> padding-left：2px; 
 padding-right：2px; 
 margin-left：2px; 
 margin-right：2px; 
 outerWidth：100％; 
  

换句话说，而不是将小节的宽度设置为 592px 我想将bar的外部宽度设置为 100％，以便计算为 592px 。这里的重要性在于，我可以将foo的宽度更改为 800px ，bar将在渲染时计算，而不是手动对所有这些实例进行数学运算。

在纯CSS中这是可能的吗？

更有趣的是：

• 如果 #bar 是一个表，该怎么办？


• 如果 #bar 是文本区域？




• 如果 #foo 是表格单元格（ td ）？ （这是否会改变问题或问题是否完全相同？）

---

到目前为止，已经讨论了 table＃bar ， input＃bar 我没有看到一个很好的解决方案textarea＃bar。我认为一个textarea没有边框/边缘/填充与 div 包装可能会与 div 样式工作 textarea

解决方案

>：

这三个不同的元素都有不同的重定向规则haha。

table＃bar 您需要将宽度设置为100％，否则将只有它确定需要的宽度成为。但是，如果表行总宽度大于 bar 的宽度，它将扩展到所需的宽度。如果我记得你可以通过设置 display：block！important; ，虽然它已经一段时间，因为ive必须解决这个问题。 （确定有人会纠正我，如果错误）。

textarea＃bar 我beleive是一个块级元素所以它将遵循与div相同的规则。这里唯一的警告是 textarea 采用 cols 和行的属性这些字符在字符列中测量。如果在元素上指定了它，它将覆盖由css指定的宽度。

input＃bar inline元素，所以默认情况下你不能分配它的宽度。但是类似 textarea 的 cols 属性，它有一个 size 可以确定宽度的元素的属性。也就是说，你总是可以通过在你的css中使用 display：block; 来指定宽度。然后，它将遵循与div相同的呈现规则。

td＃foo 将呈现为 table-cell 这有一些疯狂。这里的底线是，为了您的目的，它的行为就像 div＃foo ，直到限制其内容的宽度。这里唯一的问题是潜在的不可解释的文本在列的某处，这将使它忽略你的宽度设置。此外，列中的所有单元格都将获取最宽单元格的宽度。

---

这是块级别的默认行为元素 - 即。如果width auto （默认值），那么它将是包含元素的内部宽度的100％。所以在本质上：

  #foo {width：800px;} 
 #bar {padding-left：2px; padding-right：2px; margin-left：2px; margin-right：2px;} 
  

会为您提供所需的内容。

I am sure this problem has been asked before but I cannot seem to find the answer.

I have the following markup:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

My desire is to make foo to have width of 600px (width: 600px;) and to make bar have the following behaviors:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

In other words instead of setting width of bar to 592px I would like to set the outer width of bar to 100% so that it is computed to 592px. The importance here is that I can change foo's width to 800px and bar will calculate when rendered instead of me having to do the math for all these instances manually.

Is this possible in pure CSS?

Some more fun with it:

• What if #bar is a table?
• What if #bar is a textarea?

• What if #bar is an input?

• What if #foo is a table cell (td)? (Does this change the problem or is the problem identical?)

---

So far the table#bar, input#bar has been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a div wrap might work with the div styled to work as borders for the textarea.

解决方案

EDIT:

Well those three different elements all have different redndering rules haha.

So for:

table#bar you need to set the width to 100% otherwise it will be only be as wide as it determines it needs to be. However, if the table rows total width is greater than the width of bar it will expand to its needed width. IF i recall you can counteract this by setting display: block !important; though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).

textarea#bar i beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that textarea take an attributes of cols and rows which are measured in character columns. If this is specified on the element it will override the width specified by the css.

input#bar is an inline element, so by default you cant assign it width. However the similar to textarea's cols attribute, it has a size attribute on the element that can determine width. That said, you can always specifiy a width by using display: block; in your css for it. Then it will follow the same rendering rules as the div.

td#foo will be rendered as a table-cell which has some craziness to it. Bottom line here is that for your purposes its going to act just like div#foo as far as restricting the width of its contents. The only issue here is going to be potential unwrappable text in the column somewhere which would make it ignore your width setting. Also all cells in the column are going to get the width of the widest cell.

---

Thats the default behavior of block level element - ie. if width is auto (the default) then it will be 100% of the inner width of the containing element. so in essence:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

will give you exactly what you want.

这篇关于如何使CSS宽度填充父？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！