CSS布局受限于浏览器窗口？

Question

我花了至少10个小时试图弄清楚如何使用HTML和CSS实现所描绘的布局，而我却什么也没做到。我无休止地搜索过，虽然很多答案似乎已经接近，但我无法将其调整到位。

我只想制作一个简单的浏览器应用程序，左侧有页眉，页脚，菜单栏，以及导航栏作为主要内容的地图。我希望地图被约束到内容div而不仅仅是“溢出但隐藏”。如果没有任何滚动条，如果一切都恰到好处，我会很高兴。这有可能用CSS吗？

请，我快死了！

Answer 1

大多数情况下，您的问题是围绕地图的容器div。尝试设置它的CSS属性，如下所示：

.container {
 position: absolute;
 top: 100px; // Offset for the header 
 bottom: 100px; // Offset for the footer
 left: 200px; // Offset for the menu
 right: 0;
}

然后将地图放在100％宽度和高度内。

Answer 2

当然你可以把所有东西都固定好，听起来好像你想要那样的东西。 （关于“从来没有任何滚动条，一切都恰到好处”。） 如果这是您想要的，您可以执行以下操作：

body,#header,#menu,#footer,#content {
  position:fixed;
  margin:0;
  padding:0; 
}
#header {
  top:0;
  left:0;
  right:0;
  width:auto;
  height:40px; 
}
#menu {
  left:0;
  top:45px;
  bottom:35px;
  height:auto;
  width:120px; 
}
#footer {
  bottom:0;
  left:0;
  right:0;
  width:auto;
  height:30px; 
}
#content {
  right:0;
  top:45px;
  bottom:35px;
  left:125px;
  min-width:200px;
  min-height:200px;
  height:auto;
  width:auto; 
}
#navbar {
  position:relative;
  height:30px;
  display:block;
  min-width:200px;
}
#map {
  position:absolute;
  top:30px;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:auto; 
}

通过这样的方式，每个元素都将保留在原位，只有内容会随窗口大小调整。虽然我必须承认，我没有真的得到你所要求的。我希望这种适合你的需求。 说实话，我觉得你的问题有点奇怪，因为你似乎需要学习一些CSS基础知识。