Question

我有两个div的简单任务。我需要两者都有彩色边框，内部div必须使用所有空间。这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
   .d1{ width:150px;height:150px;border:solid 10px black;background:red;}
   .d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
   <div class=d1>
       <div class=d2>some text</div>
   </div>
</body>
</html>

但是浏览器（IE，Chrome）没有注意到我设置了边框和'divs'以显示工件。

有人抓住这个错误吗？

Answer 1

请改为：

<style type='text/css'>
    .d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
    .d2{ height:100%; width:100%; background:green;}
</style>

我认为这会给你带来的效果，基本上是通过在.d1上使用背景颜色替换.d2上的边框，添加填充到.d1以充当各种边框。

如果你向.d2添加任何边距或填充，它将添加到100％的高度和宽度值，这意味着它们会溢出。

希望这是有道理的。

编辑：注意我是如何通过将高度和宽度减少40px来补偿20px的填充（因为它将在左右两侧以及顶部和底部添加填充，使得额外的宽度和高度增加40px）< / p>

Answer 2

如果你知道父div的宽度和高度，你可以为孩子设置正确的样式，没有百分比，所以这个jsFiddle可以为你做。

Answer 3

边框不包含在您的宽度/高度中，那么您的150x150将“变为”170x170，边框为10px。

两种解决方案：

占用帐户边框，增加div宽度/高度
使用更多div，忘记边框

这是一个Jsfiddle，向您展示两种解决方案

Answer 4

由于您指定了边框粗细，因此高度和宽度不会考虑嵌套在边框内。如果我能正确理解你的问题，你可以实现如下解决方案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type='text/css'> 
   .d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;} 
   .d2{ height:73%; width:73%;border: solid 20px blue; background:green;} 
</style> 
</head> 
<body> 
   <div class="d1"> 
       <div class="d2">some text</div> 
   </div> 
</body> 
</html>

Answer 5

基本上您遇到了Html box model的问题。

你可以弄清楚自己的数学，或者根据你必须支持的浏览器，有新的“box-sizing”css样式，它改变了盒子模型的工作方式。

这是一个小提示，展示如何使用它：

http://jsfiddle.net/EHUab/

如果设置边框，内部div的高度值（100％）错误

5 个答案: