Div width 100% opera without scrollbar_问答_开发者

开发者 https://www.devze.com 2023-03-17 20:56 出处：网络

I want IE8, FF\'s effect: My code <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

I want IE8, FF's effect:

Div width 100% opera without scrollbar

My code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV width 10开发者_StackOverflow社区0% opera without scrollbar</title>
    <style type="text/css">
      <!--
      html,* {margin:0px; padding:0px; }
      html,body {width:100%; height:100%; overflow:hidden;}
      -->
    </style>
  </head>
  <body>
    <div style="position:relative; height:100%; width:100%; background:#dee; overflow:auto;">
      <div style="position:absolute; top:0px; left:0px; height:100%; width:100px; background:#e46;"></div>
      <div style="position:absolute; top:0px; left:0px; height:100px; width:2000px; background:#98a;"></div>
    </div>
  </body>
</html>

You need to learn how to use CSS Level 1. Positioning is not necessary for this type of layout.

I've created a tutorial to visually demonstrate how CSS works with the float and margin properties here... http://www.jabcreations.com/web/css/nested-divisible-elements

Keep in mind if you want to create a padding effect you will save yourself a TON of pain by instead adding margin to a child element like so...

/* Bad */
div.class1 {padding: 4px;}

/* Good */
div.class1  > div {margin: 4px;}

Note that the > operator limits the selector to first generation division elements in my example. So if you have a third generation division element the margin would not be applied. It's highly compatible and you should only consider compatibility for IE 8.0+ at this point.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV width 100% opera without scrollbar</title>
<style type="text/css">
body, html {border: 0px; margin: 0px; padding: 0px;}

#content
{
 background-color: #dee;
}

#head
{
 background-color: #98a;
 height: 100px;
}

#side
{
 background-color: #e46;
 float: left;
 width: 10%;
}
</style>
</head>

<body>

<div id="head">#head</div>
<div id="side">#side</div>
<div id="content">#content</div>

</body>
</html>