缺少div边界
Bob*_*nes 2 html css html5 css3
我需要你的帮助,
似乎我在尝试在容器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>
这是因为textarea元素具有默认填充.由于填充不包含在元素的宽度/高度计算中,因此它会溢出父元素之外,因为100%边框的宽度大于父元素宽度.
您可以删除此填充,也可以通过添加box-sizing: border-box到textarea元素来在维度计算中包含填充:
#summary {
width: 100%;
height: 100%;
border: 0;
box-sizing: border-box;
}