Div ширина 100% опера без полосы прокрутки - PullRequest
Новая
       36

Div ширина 100% опера без полосы прокрутки

1 голос
/ 06 июля 2011

Я хочу 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>

1 Ответ

1 голос
/ 23 июня 2012

Вам нужно научиться использовать CSS Уровень 1. Позиционирование не является необходимым для этого типа макета.

Я создал учебник, чтобы наглядно продемонстрировать, как CSS работает со свойствами float и margin здесь... http://www.jabcreations.com/web/css/nested-divisible-elements

Имейте в виду, что если вы хотите создать эффект заполнения, вы сэкономите ТОННУ боли, вместо этого добавив маржу к дочернему элементу, например так ... 

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

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

Обратите внимание, что оператор> ограничивает селектор элементами деления первого поколения в моем примере.Поэтому, если у вас есть элемент деления третьего поколения, маржа не будет применяться.Он очень совместим, и вам следует рассмотреть вопрос о совместимости только с 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>
...