Как получить div, подходящий для экрана без переполнения в CSS

#topnavbar { 
      width:100%; 
      padding:0; 
      border:1px solid gray; 
      margin:0; } 

     #topnavbar p { 
      margin:0; } 

     body { 
      margin-left:auto; 
      margin-right:auto; 
      margin-top:0; 
      width:1024px; }

Это мой код. Как мне заставить его иметь панель (которая называется topnavbar), чтобы она соответствовала всему экрану без переполнения? И я не хочу делать overflow:hide; или что-то еще.Как получить div, подходящий для экрана без переполнения в CSS

источник

2011-12-15 Marcus

Может быть, высота: 100% '? – Krzysztof

Ваш КСС поодаль:

#topnavbar { 
    width:100%; 
    padding:0; 
    border:1px solid gray; 
    margin:0; 
} 

#topnavbar p { 
    margin:0; 
} 

#container{ 
    width:1024px; 
    margin: 0 auto; 
} 

body { 
    /* you do not need any of your css here */ 
}

HTML:

<body> 
    <div id="topnavbar"> 
     <p>Some text</p> 
    </div> 
    <div id="container"> 
     whatever you want to center 
    </div> 
</body>

основная идея заключается в том, чтобы 100% ширины элемента, который не имеет родителя, а затем применить центрирующее контейнер под Это. В этом случае #container.

Ваш css применял ширину к корпусу, и поэтому он, вероятно, испортил всю вашу компоновку.

источник

2011-12-15 21:06:39

Я отвечал на ваш комментарий, но вы удалили слишком быстро. Я говорил: ты прав, я был слишком быстр. Но граница создала горизонтальный свиток, поэтому его вопрос о переполнении ... На мой взгляд, ответ - это комбинация обоих наших ответов :-) – ptriek

действительно. смешно, но, поскольку я оглядываюсь назад, возможно, он преднамеренно оценил его до 1024 и задавался вопросом о полосе прокрутки для 2 пикселей, добавленных границей ... только Маркус Сэнтан знает наверняка на этом этапе. –

хотя он все еще обдумывает молчание. – ptriek

Вы имеете в виду всю ширину экрана?

парадоксально, вам просто нужно удалить width:100% (границы добавляются к этому значению ...)

EDIT: И да, Кай Цин правильно, тоже - я пропустил это. Если вы поместили ширину 1024 на свое тело, ваш навигатор будет 1024, тоже ...

источник

2011-12-15 21:08:06 ptriek

Да. Для пояснения: ширина: 100% означает, что * текстовая область * (которая не включает границу) div составляет 100% ширины своего контейнера, который в этом случае является телом (и поскольку ширина тела вашей страницы не указана, это означает окно просмотра). Если вы удаляете ширину: 100%, ширина topnav div по умолчанию равна «auto», что означает, что она будет растягиваться, чтобы точно соответствовать ее контейнеру, принимая во внимание границу и дополнение. – Faust

Как получить div, подходящий для экрана без переполнения в CSS

ответ

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