HTML/CSS-边框长度

我正在尝试创建一个包含4个部分的页面，其中包含链接列表。我已将每个部分的左右边框设置为

1px纯黑

问题是这些边界只会延伸到我的内容长度。我还没能找到一种方法让他们把页面的整个长度都延长。我一直在寻找的相关主题涉及底部边界

很抱歉，代码太长，但我不确定如何真正缩短它并显示所需内容：

div.container{
显示：内联块；
背景色：rgb（0,56,0）；
最大宽度：100%；
边框：1px纯黑；
}
a:链接{
颜色：rgb（0、68、255）；
背景色：透明；
文字装饰：浅绿色；
}
a:参观了{
颜色：rgb（27164255）；
背景色：透明；
文字装饰：无；
}
a:悬停{
颜色：红色；
背景色：透明；
文字装饰：下划线；
}
a:主动的{
颜色：黄色；
背景色：透明；
文字装饰：下划线；
}
杰拉{
填充：1em；
颜色：白色；
背景色：黑色；
清除：左；
文本对齐：居中；
}
页脚{
填充：1em；
颜色：白色；
背景色：黑色；
清除：左；
文本对齐：居中；
}
氢{
颜色：黄花；
字体大小：200%；
文本对齐：居中；
填充：10px；
}
保险商实验室{
颜色：黑色；
列表样式类型：disc；
左侧填充：20px；
}
section.wiki{
浮动：左；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
保证金：1；
右侧填充：5px；
}
第四节监测{
浮动：左；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
保证金：1；
右侧填充：5px；
}
第2.adminui节{
浮动：左；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
保证金：1；
右侧填充：5px；
}
第1节其他{
浮动：左；
最大宽度：220px；
高度：至底部；
左边框：1px纯黑；
右边框：1px纯黑；
保证金：1；
右侧填充：5px；
}

有用的链接
维基








监测














管理员














其他







页脚

使用flex代替浮动布局，元素将具有相同的高度，因此所有边框将一直延伸到末端：

div.container{
显示：内联块；
背景色：rgb（0,56,0）；
最大宽度：900px；
边框：1px纯黑；
显示器：flex；
柔性包装：包装；
}
a:链接{
颜色：rgb（0、68、255）；
背景色：透明；
文字装饰：浅绿色；
}
a:参观了{
颜色：rgb（27164255）；
背景色：透明；
文字装饰：无；
}
a:悬停{
颜色：红色；
背景色：透明；
文字装饰：下划线；
}
a:主动的{
颜色：黄色；
背景色：透明；
文字装饰：下划线；
}
杰拉{
填充：1em；
宽度：100%；
颜色：白色；
背景色：黑色；
文本对齐：居中；
}
页脚{
填充：1em；
颜色：白色；
背景色：黑色；
文本对齐：居中；
宽度：100%；
}
氢{
颜色：黄花；
字体大小：200%；
文本对齐：居中；
填充：10px；
}
保险商实验室{
颜色：黑色；
列表样式类型：disc；
左侧填充：20px；
}
section.wiki{
弹性：1；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
右侧填充：5px；
}
第四节监测{
弹性：1；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
右侧填充：5px；
}
第2.adminui节{
弹性：1；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
右侧填充：5px；
}
第1节其他{
弹性：1；
最大宽度：220px；
左边框：1px纯黑；
右边框：1px纯黑；
右侧填充：5px；
}

有用的链接
维基








监测














管理员














其他







页脚

如果为每个截面定义高度（无论最长的截面是什么），并使所有截面都达到该高度，则边框应匹配

所以在每个css部分中。*您需要定义高度

高度：#px

将#替换为最长部分的实际高度，短区域将使用定义的高度和边框。您将不得不摆弄它以获得完美的像素数，但随后您可以为所有高度使用该数字

---

希望这有帮助。

正是我所需要的。谢谢。如果内容是动态的呢