how can I config css style about fixing height?
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: #c开发者_如何学JAVA0c0c0;
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.
I think you need two css changes (also see my jsfiddle):
add overflow: hidden to body
body {
...
overflow: hidden;
}
change position to relative in #header:
#header {
position: relative;
...
}
=== 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.
#words {
bottom: 102px;
...
}
3.) Use the css function calc for the #wrapper to calculate the real height (see demo3).
Negative: at the moment it works only with firefox4 (and above) and IE9.
#wrapper {
...
height: calc(100% - 100px);
height: -moz-calc(100% - 100px);
}
加载中,请稍侯......
精彩评论