Ширина HTML 100% - PullRequest
Новая
       9

Ширина HTML 100%

10 голосов
/ 12 мая 2010

Это сводит меня с ума. Что происходит с "шириной: 100%"? Очевидно, это работает только в IExplore, поэтому я думаю, что это одна из тех вещей, которые придумала Microsoft.

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

Приветствия

Ответы [ 5 ]

13 голосов
/ 12 мая 2010

Элемент уровня блока (display: block;) автоматически займет 100% ширины родительского элемента. Вы можете изменить его ширину, используя проценты или пиксели. Встроенные элементы (display: inline;) не могут изменять свою ширину.

Если вы хотите, чтобы что-то занимало все пространство родительских элементов, я предлагаю вам попробовать что-то вроде этого: 

.class{
    display:block;
    width:100%;
}
4 голосов
/ 12 мая 2010

Ширина: 100%, безусловно, не является изготовлением MS. Понимание таких элементов, как блочная модель и встроенные элементы против блоков (например, диапазоны и элементы div), поможет вам понять кое-что из того, что вы увидите. Различия в браузерах имеют меньшее отношение к «ширине: 100%», чем к тому, как браузеры интерпретируют блочную модель для данного элемента, и в частности такие вещи, как поля, границы и отступы. но то, как они интерпретируют все остальное, может повлиять на то, сколько места они выделяют как «100%».

Помните, что 100% - это 100% РОДИТЕЛЯ, а не ОКНА. 

 <body>
   <div id = "one" style="width:50%">
     <div id = "two" style = "width:100%" />
   </div>
 </body>

В этом случае «два» по-прежнему будет составлять только 50% ширины окна, поскольку оно находится в родительском элементе шириной 50%. (1 * .5 = .5)

Итак, говоря об этом, конкретный пример непонятного поведения очень помог бы людям дать вам конкретный ответ.

2 голосов
/ 12 мая 2010

Если я правильно вас понимаю, вы спрашиваете, является ли width: 100% только для IE. Ответ - нет; это понимают все основные браузеры. Источник: http://www.w3schools.com/css/pr_dim_width.asp

1 голос
/ 12 мая 2010

Обратите внимание, что width: 100% не будет работать для встроенных тегов ... Так что такие вещи, как или где свойство 'display' в качестве значения 'inline', не применяется.

Если это для вас новость, я рекомендую взять книгу, потому что HTML - это не то, что нужно изучать.

0 голосов
/ 27 марта 2014 
html {
width:100%;
}

body {
background-color:#f2f2f2;
margin:0;
padding:0;
}

a {
color:#ec3f3f;
text-decoration:none;
font-weight:400;
font-style:normal;
}

a:hover {
color:#262626;
text-decoration:none;
font-weight:400;
font-style:normal;
}

p,div {
margin:0!important;
}

table {
border-collapse:collapse;
}

::-moz-selection,::selection {
background:#ec3f3f;
color:#fff;
}

.ReadMsgBody,.ExternalClass {
width:100%;
background-color:#f2f2f2;
}

@media only screen and max-width640px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}

img[class=divider] {
width:440px!important;
height:2px!important;
}

table[class=spacer] {
display:none!important;
}

td[class=center] {
text-align:center!important;
}

table[class=full] {
width:400px!important;
margin-left:20px!important;
margin-right:20px!important;
}

table table,td[class=full_width] {
width:100%!important;
}

div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:440px!important;
margin:0 auto!important;
}
}

@media only screen and max-width479px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}

img[class=divider] {
width:280px!important;
height:2px!important;
}

table[class=spacer] {
display:none!important;
}

td[class=center] {
text-align:center!important;
}

table[class=full] {
width:240px!important;
margin-left:20px!important;
margin-right:20px!important;
}

table table,td[class=full_width] {
width:100%!important;
}

div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:280px!important;
margin:0 auto!important;
}
}
...