Home/ Questions/Q 6573733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:10:16+00:00

I have some problem about css layout. I wrote the code like below: <!DOCTYPE

  • 0

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

  1. “header”‘s height is 100 pixel.
  2. “sidebar(left side)”‘s width id 370 pixel.
  3. “content(right side)”‘s width is relative.
  4. 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
}
    • 0