如何配置关于固定高度的CSS样式？
我有一些关于 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 是我告诉过的最重要的。
如果目标实现了，我的代码就可以全部修复。请给我任何帮助。
I have some problem about css layout.
I wrote the code like below:
<!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>
then, the thing what I want to do is
- "header"'s height is 100 pixel.
- "sidebar(left side)"'s width id 370 pixel.
- "content(right side)"'s width is relative.
- When I control the browser smaller, I do not want browser to make "scroll bar".
like http://maps.google.com. google maps never make scroll bar when any resizing browser.
num.4 is most important that I told.
If the goal is made it, my code can be fixed all. Please give me any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为你需要两个CSS更改（另请参阅我的jsfiddle）：
添加
overflow：hidden到body将
position更改为#header中的relative：=== 更新 ===
有（在至少）三种可能的解决方案，但没有一个是完美的：
1.) 您来自 google 的示例网站会在开始时和每次使用 JavaScript 调整大小后计算（内容）高度。
负面：不仅仅是CSS，你需要一个脚本。
2.) 将标题的高度（此处为 100px）添加到侧边栏和内容中所有元素的 css 底部定义中（参见 演示2)。
负面：如果标题高度发生变化，您也必须更新所有底部定义。
3.) 对
#wrapper< 使用 css 函数 calc /code> 计算真实高度（参见demo3）。缺点：目前它仅适用于 firefox4（及更高版本）和 IE9。
I think you need two css changes (also see my jsfiddle):
add
overflow: hiddentobodychange
positiontorelativein#header:=== UPDATE ===
There are (at least) three possible solutions, but none is perfect:
1.) Your example site from google calculates the (content) height at the beginning and after each resize with javascript.
Negative: not css only, you need a script.
2.) Add the height of the header (here 100px) to the css bottom definition of all elements in the sidebar and content (see demo2).
Negative: if the header height changes, you have to update all bottom definitions too.
3.) Use the css function calc for the
#wrapperto calculate the real height (see demo3).Negative: at the moment it works only with firefox4 (and above) and IE9.