Question

我想要IE8，FF的效果：

enter image description here

我的代码

<!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 100% 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>

Answer 1

您需要学习如何使用CSS Level 1.此类布局不需要定位。

我已经创建了一个教程，可以直观地演示CSS如何使用float和margin属性... http://www.jabcreations.com/web/css/nested-divisible-elements

请记住，如果你想创建一个填充效果，你可以通过为子元素添加边距来节省一点痛苦......

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

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

请注意＆gt;运算符将选择器限制为我的示例中的第一代除法元素。因此，如果您有第三代除法元素，则不会应用保证金。它具有高度兼容性，此时您应该只考虑IE 8.0+的兼容性。

<!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>

Div宽度100％没有滚动条的歌剧

1 个答案: