100% широкий элемент не растягивается больше, чем ширина области просмотра

Question

Так что, когда я сжимаю страницу, чтобы сказать 1000 пикселей шириной, достаточно, чтобы появиться полоса прокрутки по оси X. Когда я прокручиваю направо, навигационная панель перестает заполнять ширину 100%, а не только ширину видимого экрана, когда вы уменьшаете окно.

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

Вот страница: http://astrodeer.com.au/habbonauts/test/index.php

Любая помощь приветствуется.

Answer 1

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

Самое простое исправление, не изменяя HTML, добавляет этот стиль в ваш CSS. Это сделает фон nav-bar не менее 1180px, который будет такого же размера, как и заголовок.

.nav-bar { 
    min-width: 1180px; 
} 

В качестве альтернативы, вы можете поместить нав-бар внутри заголовка, так что он будет расти до 100% от ширины заголовка.

Answer 2

Ширина элемента блока составляет 100%. Если контент шире ширины, он просто переполняет вне элемент, а не делает его более широким.

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

Решение 2. Вы можете установить отображение навигационной панели в встроенный блок.

#test { 
 
    width: 500px; 
 
    border: 10px solid #FCC; 
 
} 
 
#test:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.navbar { 
 
    border: 10px solid #FC6; 
 
} 
 
.navbar.inlineblock { 
 
    display: inline-block; 
 
    min-width: 100%; 
 
} 
 
.navbar.floated { 
 
    float: left; 
 
    min-width: 100%; 
 
} 
 
.content { 
 
    width: 1000px; 
 
    background: #CFC; 
 
}

<p>The container is 500px wide 
 
    <br>navbar has orange border 
 
    <br>navbar content has green background</p> 
 
<div id="test"> 
 
    <div class="navbar"> 
 
    <div class="content">1000px wide content, default behavior</div> 
 
    </div> 
 
    <div class="navbar inlineblock"> 
 
    <div class="content">1000px wide content inside inline block parent</div> 
 
    </div> 
 
    <div class="navbar floated"> 
 
    <div class="content">1000px wide content inside floated parent</div> 
 
    </div> 
 
</div>

Answer 3

Добавить этот стиль, он отлично работает.

body{ float:left; min-width:100%;} 

или

body{ display:inline-block; min-width:100%;} 

Тело не будет автоматически растягиваться до 100%;, поэтому мы добавляем их.