如何配置关于固定高度的 CSS 样式？答案

【问题标题】：how can I config css style about fixing height?如何配置关于固定高度的 CSS 样式？
【发布时间】：2019-10-02 17:43:16
【问题描述】：

我对 css 布局有一些问题。

我写了如下代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
html { height:100%; margin: 0px; padding: 0px; }
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: Verdana, helvetica, arial, sans-serif;
  font-size: 68.75%;
  background: #fff;
  color: #333;
}  
#header {
  position: absolute;
  width:100%;
  background: #c0c0c0;
  height: 100px;
}
#wrapper {
  height: 100%;
  width: 100%;
}
#content {
  position: relative;
  margin-left: 370px;
  background: #ffdab9;
  height: 100%;
}
#sidebar {
  position: absolute;
  background: #eee8aa;
  width: 370px;
  height: 100%;
}
</style>
<body>
<div id="header">header</div>
<div id="wrapper">
  <div id="sidebar">sidebar</div>
  <div id="content">content</div>
</div>
</body>
</html>

那么，我想做的事情就是

“标题”的高度为 100 像素。
“侧边栏（左侧）”的宽度 id 为 370 像素。
“内容（右侧）”的宽度是相对的。
当我控制浏览器变小时，我不希望浏览器制作“滚动条”。
喜欢http://maps.google.com。谷歌地图在任何调整浏览器大小时都不会制作滚动条。

num.4 是我说过的最重要的。

如果目标达成，我的代码可以全部修复。请给我任何帮助。

【问题讨论】：

标签： css header height css-position

【解决方案1】：

我认为你需要两个 css 更改（另见我的jsfiddle）：

将overflow: hidden 添加到body

body {
    ...
    overflow: hidden;
}

将#header 中的position 更改为relative：

#header {
    position: relative;
    ...
}

=== 更新 ===

有（至少）三种可能的解决方案，但没有一个是完美的：

1.) 您的 google 示例网站在开始时和每次使用 javascript 调整大小后计算（内容）高度。
否定：不仅仅是css，你需要一个脚本。

2.) 将标题的高度（此处为 100 像素）添加到侧边栏和内容中所有元素的 CSS 底部定义（请参阅demo2）。
否定：如果标题高度发生变化，您也必须更新所有底部定义。

#words { 
    bottom: 102px; 
    ...
}

3.) 使用#wrapper 的css 函数calc 计算实际高度（参见demo3）。
否定：目前它有效only with firefox4 (and above) and IE9。

#wrapper {
    ...
    height: calc(100% - 100px);
    height: -moz-calc(100% - 100px);
}

【讨论】：

它有效。但我认为“溢出：隐藏”正在剪裁下面的部分。我尝试将一些单词包含内容（右侧），例如：#words { position: absolute;右：123px；底部：2px；颜色：黑色;字体系列：Arial，无衬线；字体大小：11px；空白：nowrap；文本对齐：右； } 字没有出现..
而html是
INEGI