Html css中的问题填充div宽度

我只是在学习网站布局，我试图创建一个相当简单的页面来显示一些图像。我试着设置一个固定的左侧立柱，顶部有一个固定的横幅。然后我有一个“contentcontainer”，我在其中放置“content”。我这样做的目的是： 1.）我可以将“内容”宽度缩放到可用contentcontainer宽度的80%，并具有框阴影效果。 2.）如果内容高度过长，则允许用户向下滚动

我所遇到的问题是，我希望“contentcontainer”占据可用的宽度，这样“content”就可以缩放以匹配。如果我将contentcontainer的宽度设置为“auto”，而不是占用底层元素的可用宽度，那么它将只根据“content”的需要进行缩放

我试图在这里寻找答案，但我只是感到非常困惑。请告知

我可以通过将contentcontainer宽度设置为89.6%，使其在默认屏幕分辨率下工作，但这显然不是首选解决方案。如何获得contentcontainer宽度以动态填充所需空间

@font-face{
字体系列：SourceSans；
src:url（'font/SourceSansPro-Light.otf'）；
字体大小：正常；
}
@字体{
字体系列：SourceSans；
src:url（“font/SourceSansPro Bold.otf”）；
字体大小：粗体；
}
tr:n个孩子（偶数）{
背景：#FFF
}
tr:n个孩子（奇数）{
背景：#E6FCFF
}
h1{
字体系列：Verdana，日内瓦，无衬线；
字体大小：32px；
左侧填充：20px；
}
氢{
字体系列：SourceSans，sans serif；
字体大小：42px；
左侧填充：20px；
保证金：2倍；
}
h3{
字体系列：Verdana，日内瓦，无衬线；
字体大小：16px；
}
img{
垂直对齐：中间对齐；
}
主体#模板{
边际：0px；
填充：0px；
边界：无；
溢出：自动；
身高：100%；
最大高度：100%；
背景颜色：灰色；
}
分区#顶部图像{
位置：固定；
宽度：200px；
高度：120px；
左：0px；
顶部：0px；
背景：海军；
颜色：白色；
溢出：隐藏；
填充：20px；
}
div#左菜单{
位置：固定；
宽度：200px；
身高：100%；
左：0px；
顶部：120px；
背景：海军；
颜色：白色；
溢出：隐藏；
}
顶旗{
位置：固定；
宽度：100%；
高度：60px；
左：200px；
顶部：0px；
背景：海军；
颜色：白色；
溢出：隐藏；
填充：0px；
边际：0px；
}
div#contentcontainer{
显示：内联；
宽度：89.6%；
位置：固定；
身高：100%；
顶部：60px；
左：200px；
背景：灰色；
溢出：自动；
边界：无；
}
分区内容{
位置：相对位置；
宽度：80%；
填充：10px；
边缘顶部：30px；
左边距：自动；
右边距：自动；
边缘底部：200px；
背景色：#FAFAFA；
边框：1px纯黑；
盒影：10px 10px 20px黑色；
溢出：自动；
高度：自动；
填充底部：100px；
}
李{
字体系列：SourceSans，sans serif；
字体大小：24px；
列表样式类型：无；
左边距：-15px；
}
.图表{
盒影：5px10px15px#8888888；
左边距：40px；
显示：块；
左边距：自动；
右边距：自动；
}
p、 图表标题{
字体系列：SourceSans，sans serif；
字体大小：42px；
字体大小：粗体；
左侧填充：40px；
垫底：20px；
保证金：2倍；
文字装饰：下划线；
}

模板示例

项目1
项目2
项目3

模板：页眉



第一张图表






第二张图表






第三张图表






第三张图表






第三张图表






第三张图表






第三张图表






第三张图表

您可以使用

calc

将其添加到CSS中：

div#contentcontainer {
    width: calc(100% - 200px);
}

如果可以解决问题，请在下面留下您的评论