缺少 div 边框答案

【问题标题】：Missing div borders缺少 div 边框
【发布时间】：2015-12-29 19:21:42
【问题描述】：

我需要你的帮助，

似乎我在尝试在容器 div 内的 textarea 周围添加 div 以及在容器 div 底部包含我的按钮的 div 边框时遇到了一些困难。

第一个问题：缺少右侧边框

第二个问题，inner2 div 中缺少 1px 纯红色。

这是问题和预期结果的图片：

想要的结果是：

这里是有问题的 HTML 和 CSS：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#container {
    text-align: center;
    width: 500px;
    border: 1px solid green;

}
#summary {
    width: 100%;
    height:100%; 
    border: 0;
}

#inner1 {
    height: 500px;
}

#inner2 {
    border-top: 1px solid red;
    width: 100%;
}
</style>


</head>

<body>

<div id="container">


        <div id='inner1'><textarea id="summary"></textarea></div>


    <div id="inner2"><input type="button" value="Close"></div>

</div>
</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为textarea 元素具有默认填充。由于填充不包含在元素的宽度/高度计算中，它会溢出到父元素之外，因为100% + 边框的宽度大于父元素的宽度。

您可以删除此填充，也可以通过将box-sizing: border-box 添加到textarea 元素来将填充包含在维度计算中：

#summary {
    width: 100%;
    height: 100%;
    border: 0;
    box-sizing: border-box;
}

【讨论】：

【解决方案2】：

添加overflow: hidden 和box-sizing: border-box;，如下所示：

#container {
    text-align: center;
    width: 500px;
    border: 1px solid green;

}
#summary {
    width: 100%;
    height:100%; 
    border: 0;
    box-sizing: border-box;
}

#inner1 {
    height: 500px;
    overflow: hidden;
}

#inner2 {
    border-top: 1px solid red;
    width: 100%;
}

【讨论】：