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

Question

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

我只想制作一个简单的浏览器应用程序，它有一个页眉、页脚、左侧的菜单栏，以及一个以导航栏为主要内容的地图。我希望地图被限制在内容 div 中，而不仅仅是“溢出但隐藏”。如果没有任何滚动条，我会喜欢的，如果一切都合适的话。这可能与 CSS 吗？

拜托拜托，我要死在这里了！

Answer 1

当然，你可以把所有东西都固定好，听起来好像你想要这样的东西。（关于“从来没有任何滚动条，一切都刚刚好”。）如果这是你想要的，你可以做如下的事情：

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 基础知识。

Answer 2

大多数情况下，听起来您的问题与地图的容器 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% 的宽度和高度放在里面。