content outgrows div 100%

В настоящее время я пытаюсь сделать div, который на 100% шире всего экрана. И я сделал это, написав код:content outgrows div 100%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 

<head> 
    <title>100% width</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <style type="text/css"> 
     html,body { 
      padding:0px; 
      margin:0px; 
      width:100%; 
     } 
    </style> 

</head> 

<body> 

    <div style="background-color:yellow;"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 

</body> 

</html>

Это отлично работает в нормальном зуме, но когда я делаю максимальные приближать (FireFox 6.0.2) буквы внутри DIV перерастает желтый ящик. Есть ли способ, чтобы желтая коробка также расширялась до конца окна?

Спасибо.

источник

2011-09-22 html beginner 83

ли это важно? – Ben

Что произойдет, если вы только поместите css в div и удалите html и body? – cgatian

Вы можете заставить действительно длинное слово обертывание:

word-wrap: break-word;

в вашем стиле Див.

Действительно ли имеет значение, что происходит при максимальном масштабировании?

источник

2011-09-22 02:16:12 Ben

Наверное, нет. То, что я пытаюсь достичь, - это что-то вроде этого http://news.yahoo.com/, где даже если вы увеличиваете или уменьшаете масштаб до максимального уровня, все выглядит совершенно одинаково. Ни один элемент не выходит из исходного положения. В отличие от http://news.google.com/, где при максимальном увеличении текст «больше» перекрывается с «Войти». Любые идеи о том, как это можно достичь? –

Может быть достигнуто с терпением и экспериментированием. Извините, немного не помогите, это действительно зависит от того, как работает ваш код и дизайн. Причина, по которой Google обрушивается на себя, заключается в том, что они используют некоторое абсолютное положение, а ширина полосы сжимается до ширины браузера при максимальном увеличении, тогда как yahoo один правильно масштабируется с остальной частью сайта. – Ben

Вариант 1 Если вы хотите сохранить текст в желтом поле, попробуйте добавить этот стиль CSS.

div {word-wrap: break-word;}

Это приведет к тому, что текст перейдет к следующей строке, а не продолжит.

Вариант 2 или вы могли бы попытаться скрывая содержание, которое проходит мимо границы сНа, используя CSS стили

div {overflow:hidden;}

источник

2011-09-22 02:20:53 TryHarder

Кажется, Бен избил меня с опцией 1! – TryHarder

content outgrows div 100%

ответ

Смежные вопросы