Javascript 让div保持屏幕宽度和高度

我期待创建一个网站，其中有一个主div，其中的宽度和高度始终是屏幕的大小。无论这个div中包含什么，它都必须包含这个宽度和高度

如果你看看我想要的例子

我的目标是将导航部分包含在左侧的蓝色大部分中，将主页内容显示在白色框中，并使此白色div仅横向滚动。我已经找了好几天试图让它工作，但总是出了问题。我尝试过的例子有：

如果有人能帮上忙，或者至少能给我指明正确的方向，那就太棒了。提前谢谢。

1。使用css3flexbox

/*QuickReset*/*{margin:0；框大小：border-box；}html，正文{高度：100%；}
/*
OP:-我希望创建一个网站，其中有一个
宽度和高度均为
始终保持屏幕的大小
让这就是你的身体！
*/
身体{
背景：#0ae；
显示器：flex；
flex-flow：行nowrap；
填充：40px；
}
/*
OP:-我的目标是导航部分
包含在左侧的蓝色大部分中
答：-多亏了车身上的CSS3 flexbox，您所需要的只是所需的菜单宽度：
*/
旁白{
宽度：140px；/*或您想要的任何尺寸，px，%*/
}
/*
OP:-以及要在中显示的主页内容
白色框，用于此白色div仅横向滚动
A:-添加溢出：自动；要使其滚动和灵活：1要增长到可用大小
*/
文章{
背景：#fff；
溢出：自动；/*使元素可滚动*/
flex:1；/*让浏览器扩展此元素*/
}
/*只是为了演示横向滚动*/
文章{
显示器：flex；
flex-flow：行nowrap；
}
部分{
最小宽度：100%；
}

菜单
“我希望此内容区域横向滚动”
是的

按照您喜欢的方式设置主div css溢出属性后， 您始终可以使用javascript编写它（如给定示例中所示），并且它将完全向后兼容

<div id=[mainDivID]>
<script>
[maindDivID].style.width = screen.width +"px";
[maindDivID].style.height = screen.height +"px";
</script>
<!-- main div content -->
</div>

[maindvid].style.width=screen.width+“px”；
[maindvid].style.height=screen.height+“px”；

欢迎来到Stackoverflow。只是一个开发技巧：清楚地定义问题。一个定义明确的问题已经解决了一半。你说“事情总是出差错”。所以，给我们看看你的代码的一些版本，并具体解释它的错误，“老派”<代码>计算为CSS3。旧的学校需要JavaScript。不过，我还是喜欢这个答案@PHPglue-woooops:）编辑：）我匆忙创建flexbox示例，但计划删除CSS3

calc

！谢谢你的关注！！是的，这个答案应该可以！我在父元素ei VW和VH上使用了视口单位。然后使用flexbox和儿童百分比单位抱歉，对这个答案的回复太晚了，但这正是我想要的，它工作得非常好！在将html和身高设置为

100%

之后，感谢您的回答，您不需要JS@RokoC.Buljan，哦，我知道我不知道-但是OP确实需要内容在任何时候都扩展到屏幕的大小，不管用户操作会缩小文档体窗口的其他大小。而这是你不能用100%宽度做的。因为这是一个相对值。啊哈，我想我明白了。如果“白色”DIV始终需要与实际视口完全相同的大小，则“是”！你是对的，尽管我最好忘记向后兼容性，使用

100vh

和

100vw

，否则你的解决方案还需要一个在调整窗口大小时调用的函数。。。慢慢地，你在不必要的复杂性中成长@Buljan这就是你错的地方，专业人士永远不会忘记向后兼容性，并且总是尝试使用最小的资产来获得最大的输出。同样，OP并不关心运行其应用程序的窗口的大小——他想要的是在任何给定的时间，将底层内容完全扩展到设备上可用的最大分辨率。百分比是不可能的——每个人都知道这一点。我认为你读不好OP的问题。如果有帮助的话，我编辑了我的答案，一步一步地把OP的问题包括进去。在你读过之后，我只能悲哀地得出结论1。新手很难理解和实现您的代码。2.未完成任务（按OP要求）。3.您没有提供处理浏览器大小调整的解决方案。所以谢谢你提醒我关于专业人士的事；）