Question

我有2个嵌套的div应该是100％宽。不幸的是，带有Textbox的内部div溢出并且实际上比外部div大。它有一个左边距，溢出大约边距的大小。

我该如何解决？

<div style="width:100%;">
    <div style="margin-left:45px; width:100%;">
    <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

如果我不做100％，那么文本框不是100％宽。

Answer 1

只需删除两个div的宽度。

div是块级元素，将使用所有可用空间（除非您开始浮动或定位它们），因此外部div将自动100％宽，内部div将在设置后使用所有剩余空间左边距。

我在jsfiddle上添加了textarea的示例。

带有输入的

Updated example。

Answer 2

div是一个块元素，默认为100％宽。您只需将textarea宽度设置为100％。

Answer 3

<div style="width:100%;">
    <div style="margin-left:45px;">
       <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

Answer 4

如果布局的某些其他部分影响div宽度，则可以设置width:auto，而div（这是一个块元素）将填充空间

<div style="width:auto">
    <div style="margin-left:45px;width:auto">
        <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

如果仍然无法正常工作，我们可能需要查看更多布局HTML / CSS

Answer 5

在头部或外部文档中添加一些css。 asp：TextBox呈现为输入：

input {
     width:100%;
}

您的HTML应如下所示：http://jsfiddle.net/c5WXA/

请注意，这会影响您的所有文本框：如果您不想这样做，请为包含div的类提供一个类并指定css。

.divClass input {
     width:100%;
}

Answer 6

我意识到这是一篇很老的帖子，但这可能会让像我这样的人从谷歌搜索来到这个页面并且最终处于他们的智慧状态的人受益。

这里给出的其他答案都没有为我工作，我已经放弃了希望，但今天我正在寻找解决div的另一个类似问题的解决方案，我在SO上找到了多次回答。接受的答案适用于我的div，我突然想到尝试使用我以前的文本框问题 - 它有效！解决方案：

将box-sizing: border-box添加到文本框的样式中。

要使用CSS将其添加到所有多行文本框，请将以下内容添加到样式表中：

textarea
{
  box-sizing: border-box;
}

感谢thirtydot提供的解决方案

width: 100%-padding?

和

Content of div is longer then div itself when width is set to 100%?

保留左边和宽边的div：右侧溢出100％

6 个答案: