100 width css: CSS width 100%. Блок, который занимает всю ширину веб-страницы.

Разница между width:auto и width:100%

При адаптации макета для различной ширины окна просмотра (также известного как адаптивный дизайн) или носителя (например, для печати) обычно сбрасываются любые значения float и width в основных блоках макета, чтобы линеаризировать их отображение.

Разблокировать плавающий элемент так же просто, как указать float:none . Ширина не кажется такой уж простой — в последнее время я сталкивался с несколькими случаями, когда люди используют width:100% , чтобы отменить явно указанную ширину, когда вместо этого следует использовать width:auto . Итак, вот краткое объяснение разницы.

Начальная ширина элемента блочного уровня, такого как div или p , равна auto . Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Если у него есть какие-либо горизонтальные отступы или границы, их ширина не добавляется к общей ширине элемента.

Вот формула спецификации CSS 2.1 для блочных незаменяемых элементов в обычном потоке:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = ширина содержащего блока

Пока значение width равно auto , элемент может иметь горизонтальное поле, отступ и границу, не становясь шире своего контейнера (если, конечно, сумма margin-left + border-left-width + заполнение слева + заполнение справа + border-right-width + margin-right больше контейнера). Ширина его блока содержимого будет равна тому, что останется после вычитания полей, отступов и границ из ширины контейнера.

С другой стороны, если вы укажете width:100% , общая ширина элемента будет равна 100% содержащего его блока

плюс любых горизонтальных полей, отступов и границ (если только вы не использовали box-sizing:border -box , и в этом случае к 100% добавляются только поля, чтобы изменить способ расчета его общей ширины). это может быть то, что вы хотите, но, скорее всего, это не так.

Чтобы визуализировать разницу, я сделал пример: ширина:авто против ширины:100%.

Итак, в следующий раз, когда вы обнаружите, что устанавливаете ширину элемента уровня блока на 100% , чтобы он занимал всю доступную ширину, подумайте, действительно ли вы хотите установить для него значение auto . В большинстве случаев это так, и это избавит вас от вопросов, почему элемент не помещается внутри своего контейнера, когда вы позже зададите ему горизонтальный отступ или рамку.

Этот пост является кратким советом. Справочная информация доступна в кратких советах для веб-разработчиков и веб-дизайнеров.

Опубликовано 2 декабря 2011 г. в Quick Tips, CSS

• Предыдущий пост: Стилизация кнопок в iOS WebKit и -webkit-appearance:none
• Следующее сообщение: Посещенные ссылки можно отличить только по цвету

css — Как сделать контейнер Div шириной 100% только на главной странице сайта?

спросил 6 лет, 5 месяцев назад

Изменено 21 день назад

Просмотрено 6к раз

 #контейнер {
    ширина: 75%;
    поплавок: справа;
}
 

Если я изменю ширину на %100, это повлияет на весь сайт, я просто хочу, чтобы домашняя страница имела ширину 100%, а все остальные страницы с боковой панелью 75%

Это больше CSS, чем вопрос WordPress, но

Есть несколько способов сделать это, но я думаю, что это самый простой. Темы WordPress должны использовать класс home в теге body, а область содержимого сайта имеет класс site-content, поэтому, чтобы установить основную область содержимого на полную ширину, используйте:

 .home .site-content {
  ширина: 100%;
}
 

Вам также придется скрыть боковые панели. Если вы хотите скрыть их все:

 .sidebar {
  дисплей: нет;
}
 

Если вы используете WordPress 4.7+, вы можете легко добавить CSS через Customizer->Additional CSS.

Дайте div идентификатор

HTML

 
 содержимое вашего div 
 

, а затем измените его на 100% в файле CSS:

CSS

 #whatever { width:100%; }
 

Будет затронут только тот div с этим ID.

Эта проблема может быть решена с помощью функции wordpress, такой как is_home() Функция используется для проверки того, является ли текущая страница домашней страницей или нет. Вы можете использовать эту функцию для применения CSS только на главной странице.

Для этого есть два способа

Я предполагаю, что вы хотите увеличить ширину класса .container .

1. В разделе head вашего header.php используйте такую ​​функцию

    <голова>
         
       <стиль>
              .контейнер{ширина:100%!важно;}
       
     
   
    

Вышеуказанная функция в головной части поможет, и я поставил !important со свойством css, чтобы оно превзошло другое свойство этого класса. Этот тег css в стиле будет применяться только на домашней странице из-за функции

is_home() .

2. Другой способ сделать это внутри тега body . Например, это div, ширину которого вы хотите изменить на

   .

    <дел>
   //содержание....
   

 
 <дел>
 
 <дел>
 
//содержание. ...