Html 为什么我的div在大窗户上不能正常工作？

我在用CSS编写网站代码时遇到了一些错误。如果有人能帮助我，我将不胜感激

我想做什么：我有两个不同的div，Main和Additional。我希望主div是总宽度的60%，无论窗口大小如何。第二个div，额外的一个div，显然应该具有其余div的宽度，它是窗口的40%（同样：无论窗口大小）

我有什么取而代之的？嗯，主分区非常薄，当然不是窗口的60%。我还认为，额外的div不是填充窗口的其余部分，而是填充到一定程度，然后突然结束（？）。我认为（？）由于某种原因，当我的互联网浏览器的窗口是尽可能小的（移动），那么它们分别是60%和40%。但是，由于一个我无法理解的原因，当窗口被扩展时（例如，当我在桌面上最大化时），div不是“流动的”，并且不会根据窗口而改变，而是保持原来的状态

所以我的问题是：我做错了什么，如何纠正

源代码如下：

正文{
背景色：#003399；
颜色：#FFCC00；
保证金：0；
填充：0；
}
a:链接{
颜色：#FFCC00；
}
a:参观了{
颜色：#FFCC00；
}
.集装箱{
显示：表格；
边界塌陷：分离；
/*边框间距：10px*/
}
.等分{
显示：表格单元格；
}
.div填充{
填充：10px；
}
#主体{
/*浮动：左*/
宽度：60%；
右边框样式：实心；
右边框颜色：#FFCC00；
右边框宽度：3px；
/*右边距：10px*/
身高：100%；
/*最小高度：100vh*/
}
#附加部分{
/*宽度：40%*/
身高：100%；
/*最小高度：100vh*/
/*左边距：10px*/
}

主要信息
一些文本

一些文本

一些文本

附加信息
AAAA

AAAA

AAAA

AAAA

AAAA

AAAA

问题在于%CSS单位是相对的，是父项高度和宽度的百分比。通常情况下，这不会是一个问题，但是如果父对象不是窗口高度或宽度的100%，那么div也不能在其中。

---

您可以将CSS vh和vw单位用于视口高度和视口宽度，而不是使用%。

您需要添加

宽度：100%到
容器
。请看这里：


正文
{
背景色：#003399；
颜色：#FFCC00；
保证金：0；
填充：0；
}
a:链接
{
颜色：#FFCC00；
}
a:参观了
{
颜色：#FFCC00；
}
.集装箱
{
显示：表格；
边界塌陷：分离；
宽度：100%；
/*边框间距：10px*/
}
.等分
{
显示：表格单元格；
}
.div填充
{
填充：10px；
}
#主体
{
/*浮动：左*/
宽度：60%；
右边框样式：实心；
右边框颜色：#FFCC00；
右边框宽度：3px；
/*右边距：10px*/
身高：100%；
/*最小高度：100vh*/
}
#附加部分
{
宽度：40%；
身高：100%；
/*最小高度：100vh*/
/*左边距：10px*/
}

主要信息
一些文本

一些文本

一些文本

附加信息
AAAA

AAAA

AAAA

AAAA

AAAA

AAAA

现代Web开发解决方案是使用Flexbox或CSS网格。这两种方法的编码效率都很低，允许完全响应，并且与可能造成混乱的浮点和表相比有一些优势

CSS网格解决方案：
您可以使用以下命令声明一个2列网格：左列为60%，右列为40%：
.container{display:grid；网格模板列：60%40%；}


正文{
背景色：#003399；
颜色：#FFCC00；
保证金：0；
填充：0；
}
a:链接{
颜色：#FFCC00；
}
a:参观了{
颜色：#FFCC00；
}
.集装箱{
显示：网格；
网格模板柱：60%40%；
最小高度：100vh；
}
.div填充{
填充：10px；
}
#主体{
右边框样式：实心；
右边框颜色：#FFCC00；
右边框宽度：3px；
}

主要信息
一些文本

一些文本

一些文本

附加信息
AAAA

AAAA

AAAA

AAAA

AAAA

AAAA

modernw eb开发的前两个错误是使用表格进行样式化，然后使用float。您可以使用flexbox或css-grid来实现。这是否回答了您的问题？虽然这可能会回答这个问题，但发布代码来显示它的工作原理。您的技术错误。父母不必100%正确地工作。问题是，宽度为100%的孩子将在现有的边距、填充物和边框上拥有父母宽度的100%。这将导致溢出将其破坏。因此，他需要使用
calc
对60%/40%减去现有的填充物和broder进行细分。@tacoshy你部分正确。如果OP没有设置
边距
，则
框大小：边框框
将在此处工作。不需要
calc
。