Почему фиксированные элементы не принимают максимальную ширину?

-1

Прежде всего, я не могу размещать код здесь, так как проблема связана с моим blog. Пожалуйста, откройте это. Теперь на самом деле есть две проблемы.Почему фиксированные элементы не принимают максимальную ширину?

Главная проблема:

Если вы заметили, содержание на верхней части, которая на самом деле заголовок, содержащий название моего блога, имеет фиксированное положение. То же самое происходит с div чуть ниже его, то есть мой навигация панель (div с классом tabs-external). Оба эти элементы имеют максимальную ширину: 1090px, НО "S НЕ РАБОТАЕТ Есть ли способ, чтобы эти элементы являются фиксированными, а также принимать максимальную ширину

Задача 2:.?

Вторая вещь что, когда вы уменьшаете ширину экрана вашего браузера, div имеет основной контент (т. е. div с классом content-external), поскольку я установил для него свойство max-width. Но проблема в том, что когда вы открываете этот блог в любом смартфоне, он не следует за ним. Блог открывается с шириной 1090 пикселей. Почему это происходит? Что-то мне не хватает?

источник

2016-07-04 Anonymous

Почему вы установки заголовка к максимальному -width 1090px, когда контент только 767px? –

Я хочу, чтобы он был одинаковой ширины с остальной частью контента. –

Я хочу дать ему гибкую ширину. Он должен уменьшить свою ширину при уменьшении ширины браузера, как и остальная часть содержимого блога. –

-1

Когда я осмотреть вашу страницу я вижу это на: home.html: 162

html body .region-inner { 
     min-width: 0; 
     max-width: 100%; 
     width: auto; 
    }

Если удалить это ширина ваших навигационных панелей отлично.

источник

2016-07-04 11:36:16

Основная проблема: Ваш код, кажется, ничего неожиданного не делает. Возможно, вы неправильно поняли использование max-width. Что именно вы хотите, чтобы результат был? Если вы хотите ниже эффект:

Затем просто изменить:

header 's max-width: 1090px к width:100%;max-width:1090px

.tabs-outer' s max-width: 1090px к width:100%;max-width:1090px;

Задача 2:

Предполагая, что вы не получили от вас эффекта на мобильном устройстве, используйте CSS Media Queries, чтобы указать CSS на основе размера экрана. Вот пример:

@media (max-width: 767px){ 

.tabs .widget li, .tabs .widget li{ 
    width: 100%; 
    height: 34px; 
    text-align: center; 
    border: 1px solid #fff; 
    border-left: none; 
    border-right: none; 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li:selected{ 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li a{ 
    z-index: 0; 
    width: 100%; 
} 

}

(Этот пример был бы один шаг, чтобы рациональнее использовать пространство для небольших экранов, и вот результат:

источник

2016-07-04 11:36:29

Давайте сначала обсудим первую проблему. Когда я устанавливаю ширину max-width в ширину, она не будет уменьшать ее ширину, когда я уменьшу ширину браузера. Я хочу, чтобы он был гибким, как и весь контент блога. –

Затем сделайте это ... ширина: 1090px; max-width: 100%; –

Это действительно хорошо. Но я сомневаюсь. Скрывает ли ширина или фактически уменьшает ширину при уменьшении ширины браузера? Потому что мы «фиксировали» ширину до 1090px! –

Почему фиксированные элементы не принимают максимальную ширину?

ответ

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