Question

我需要你的帮助，

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

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

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

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

期望的结果是：

这是HTML＆amp;有问题的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>

Answer 1

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

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

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

Answer 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%;
}

缺少div边界

2 个答案: