我如何配置固定高度的CSS样式？

问题描述 投票：0回答：1

我对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>

然后，我想做的是

  1. “标题”的高度为100像素。
  2. “”侧边栏（左侧）“的宽度ID为370像素。
  3. “内容（右侧）”的宽度是相对的。
  4. [当我控制浏览器较小时，我不希望浏览器制作“滚动条”。像http://maps.google.com。调整大小的浏览器时，谷歌地图从不制作滚动条。

    5. 我告诉过的第4个最重要。

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

我对CSS布局有一些问题。我写了如下代码：

css header height css-position
1个回答
0
投票

我认为您需要进行两个CSS更改（另请参阅我的jsfiddle）：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.