Ustawienie diva na całą szerokość strony?

Question

Witam

Ustawiłem diva na całą szerokość strony i wszystko działa, natomiast jest taki problem, że jak zmniejsze okno przeglądarki to pojawiają się suwaki i jak przesune maxymalnie w prawą strone to zostaje białe pole tak jakby div nie był na całą szerokość. Da się temu jakoś zaradzić? Jak sprawić by div przystosowywał się do szerokości?

Answer 1

margin:auto;

 

Comments

dodałem i nie pomogło

---

ustawiłem na 100%

Answer 2

W jaki sposób ustawiłeś temu divovi szerokość na całą stronę? Podałeś width w pikselach? Jeśli tak to właśnie dlatego, ponieważ ustawiłeś szerokość na stałe. Proponuję podać to w procentach czyli:

width: 100%;

 

Comments

od początku tak ustawiłem no i jest na całą szerokość ale jak zmiejsze okno przeglądarki i pojawią sie suwaki to po przesunięciu suwaka jest białe pole a nie zawartość diva

---

Możesz pokazać kod HTML i CSS dotyczący tego diva i jego zawartości? Być może masz tak ustawione pozostałe elementy, że mają ustawiać się jakoś inaczej a nie obok siebie i dlatego nie ma nic po przesunięciu.

Answer 3

<div id="pasek">
                                <div class="opcje_menu">Menu1</div>
                                <div class="opcje_menu">Menu2</div>
                                <div class="opcje_menu">Menu3</div>
                                <div class="opcje_menu">Menu4</div>
                                <div class="opcje_menu">Menu5</div>
                                <div class="opcje_menu">Menu6</div>
                                <div style="clear:both;"> </div>
</div>        

#pasek
{
width:90%;
background-color: #00994c; 
padding-top:50px;
padding-bottom:50px;
padding-left:10%;
color:white;
margin:auto;
} 

.opcje_menu
{
float:left;
text-align:center;
padding:10px;
width:80px;
font-family: 'Open Sans', sans-serif;
border-radius:10px;
} 

Comments

Czyli chcesz żeby div dostosował się do szerokości ekranu i aby nie było wcale pasków przesuwu, tak?

---

tak, bo uważam, że lepiej tak niż jakby miało być puste miejsce po przesunięciu suwaka

---

Dzieje się tak, dlatego że dałeś lewy padding. Czyli w obecnej chwili próbujesz ustawić szerokość diva na całą stronę ale jeszcze do tego przecież dochodzi padding!

Czyli masz dwa wyjścia:

Możesz ustawić width na 90% - dzięki temu łączna szerokość z paddingiem będzie wynosiła 100% czyli pełny ekran.

Lub druga opcja możesz posłużyć się taką właściwością CSS, która spowoduje, że marginesy (w tym też border i padding) będą wliczane w szerokość strony:

box-sizing: border-box;

Użyj czego uważasz, efekt powinien być taki sam :)

---

ustawiłem width na 90% i ten padding na 10% no i nadal po zmiejszeniu okna pojawia się suwak w poziomie i po przesunieciu w prawo zostaje puste pole.

---

Jeśli ustawiłeś padding left na 10% i width na 90% to musi strona być na całej szerokości ekranu. No chyba że masz tam gdzieś jeszcze padding right to wtedy też należy go uwzględnić w szerokości strony ale w kodzie go nie ma więc zakładam że nie.

Ja zrobiłem tak i żadnych pasków przesuwu u mnie nie ma ;)

#pasek 
{ 
width:90%; 
background-color: #00994c;  
padding-top:50px; 
padding-bottom:50px; 
padding-left:10%; 
color:white; 
margin:auto;
} 

---

no to zmiejsz okno przeglądarki i jak ci sie pojawi suwak na dole to przesun go w prawo.

---

Zmniejszam okno przeglądarki i pasek mi się nie pojawia ;)

Mogę nawet zmniejszyć tak, że pozycje menu przestają się mieścić w jednym rzędzie ale i tak paska nie ma - pozycje menu przechodzą do nowej linii.

---

Dobrze, poczytam jeszcze o tym, dziękuje za pomoc i zajęcie się temattem.

Answer 4

Da się zrobić tak aby suwak poziomy się nie pojawiał tylko strona się dostosowywała do szerokości przeglądarki?