100% szerokości nie obejmuje całej szerokości przeglądarki w webkit

Mam problem z tym, co uważałem za martwy prosty problem.100% szerokości nie obejmuje całej szerokości przeglądarki w webkit

Próbuję utworzyć element div, który obejmuje 100% szerokości okna przeglądarki. Element div jest wypełniony kilkoma elementami div, które rozszerzają się, wypełniając całą przestrzeń zmiennymi kolorami, takimi jak boisko piłkarskie. Dywizje te będą się rozszerzać, dopasowując się do pełnej szerokości danej przestrzeni, która ma indywidualne 1% paski, które wypełniają tę przestrzeń w pełni.

Wygląda na to, że działa dobrze w Firefoksie, ale w Safari (i Chrome) obliczenia wydają się zbyt rygorystyczne i pozostawia dodatkowe miejsce po prawej stronie.

Czy istnieje sposób na uniknięcie tego niewykorzystanego miejsca? Napotkano ten sam problem w Safari i Chrome, nawet jeśli umieszczam go w div o stałej szerokości ... zawsze pozostało wolne miejsce po prawej stronie. Zastanawiam się, czy po prostu prosi o to, aby zrobić zbyt wiele matematyki?

Oto kod, którego używam, z alternatywnymi wersjami dzielącymi przestrzeń na działy 5% i podziały 1%. Przepraszam, to długi i nadmiarowy kod.

<html> 
<head> 

<style type="text/css"> 
<!-- 

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

.clearfix { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}  

#field { 
    width: 100%; 
    background: #009900; 
    height: 100px; 
    margin: 0; 
    margin-bottom: 25px; 
    padding: 0; 
}  

.singleyard { 
    width: 1%; 
    float: left; 
    margin: 0; 
    padding: 0; 
    background: #009900; 
}  

.fiveyards { 
    width: 5%; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

.alt { 
    background: rgba(0,0,0,0.25); 
} 

.oneyard { 
    width: 20%; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

--> 
</style> 

</head> 

<body> 


<div id="field"> 
    <div class="fiveyards">5</div> 
    <div class="fiveyards alt">10</div> 

    <div class="fiveyards">15</div> 
    <div class="fiveyards alt">20</div> 

    <div class="fiveyards">25</div> 
    <div class="fiveyards alt">30</div> 

    <div class="fiveyards">35</div> 
    <div class="fiveyards alt">40</div> 

    <div class="fiveyards">45</div> 
    <div class="fiveyards alt">50</div> 

    <div class="fiveyards">55</div> 
    <div class="fiveyards alt">60</div> 

    <div class="fiveyards">65</div> 
    <div class="fiveyards alt">70</div> 

    <div class="fiveyards">75</div> 
    <div class="fiveyards alt">80</div> 

    <div class="fiveyards">85</div> 
    <div class="fiveyards alt">90</div> 

    <div class="fiveyards">95</div> 
    <div class="fiveyards alt">100</div> 

</div> 


<div id="field"> 
<!--below section is repeated 10 times --> 
<div class="singleyard">1</div> 
<div class="singleyard">2</div> 
<div class="singleyard">3</div> 
<div class="singleyard">4</div> 
<div class="singleyard">5</div> 
<div class="singleyard">6</div> 
<div class="singleyard">7</div> 
<div class="singleyard">8</div> 
<div class="singleyard">9</div> 
<div class="singleyard alt">10</div> 
<!--end repeated section--> 

</div>  
</body> 
</html>

Źródło

2011-07-12 vaderules

dlaczego wszystkie twoje style CSS są skomentowane? – Hailwood

Ha. Nie mam pojęcia, dlaczego były tam te tagi komentarzy, ale dzięki za złapanie. Niestety, ich usunięcie nie pomogło. – vaderules

Jaki jest ostateczny status twojego rozwoju. Znalazłeś odpowiedź. Mam podobne problemy. (Patrz: http://stackoverflow.com/questions/17089419/full-width-of-the-mobile-not-possible-phonegap-requirejs-jquery) – user1102171

Jedyne co mogę myśleć jest dodanie:

html, body 
{ 
    width: 100%; 
}

Wystarczy, aby upewnić się, safari wie kontenera nadrzędnego pola jest również 100%;

Inną rzeczą jest, aby spróbować dodać:

html { overflow-y: scroll; }

To powinno zmusić do przewijania z boku, nawet jeśli jest nieaktywna. Zastanawiam się, czy niektóre renderowanie Webkit tymczasowo miga pasek przewijania, ale nie daje miejsca z powrotem. Dowolna z tych prac?

Źródło

2011-07-12 04:11:12

Dzięki za sugestie, niestety problem utrzymuje się. Najprawdopodobniej ograniczyłem go do Safari i Chrome zaokrąglając% szerokości do 1/2 procenta (i nie dalej), co powoduje, że pozostała spacja, chyba że całkowita szerokość jest "doskonała w pikselach". Może uda mi się wymyślić sposób, aby oszukać przeglądarkę w celu jej prawidłowego obliczenia, ale rozwiązanie wciąż mnie w tej chwili umyka. – vaderules

mam stałe kopalni dodając

html, body 
{ 
    width: 100%; 
    margin: 0px; 
}

szczęśliwy kodowania !!!

Źródło

2011-12-06 02:03:33 Chibbie

nie działa! ... podobny problem jest napotykany ... – user1102171

Naprawiłem za pomocą display: table-cell

#field { 
    width: 100%; 
    background: #009900; 
    height: 100px; 
    margin: 0; 
    margin-bottom: 25px; 
    padding: 0; 
    display: table; 
}  

.singleyard { 
    width: 1%; 
    margin: 0; 
    padding: 0; 
    background: #090; 
    display: table-cell; 
} 

.fiveyards { 
    width: 5%; 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
}

Źródło

2011-12-31 07:32:44 clowwindy

zauważył to nie odpowiedział. Miałem ten sam problem. Dodałem następujące wiersze do mojej klasy CSS:

margin-right:-10px; 
margin-left:-10px;

Źródło

2012-12-09 16:20:10

dodanie min-width: 100% wydaje rade

Źródło

2013-05-20 21:23:38 ggoren

nie ... nie działa ... – user1102171

mam stałą kopalni przez

body 
{ 
background-color:#dddddd; 
width:100%; 
margin:0px; 
}

Źródło

2013-08-19 17:09:35 mr5

miałem ten sam problem, to co ja odkryto: gdzieś w twoim CSS masz inny div, który ma szerokość 100%, a także ma dopełnienie. Ponieważ wartość dopełnienia jest dodawana do szerokości, wartość tego elementu div staje się większa niż 100%. Rozwiązaniem jest upewnienie się, że nie użyjesz dopełnienia na dowolnym div, który jest ustawiony na 100% szerokości. Jeśli potrzebujesz dopełnienia, spróbuj dodać dopełnienie do elementu wewnątrz div.

Źródło

2013-09-10 22:53:20

To była poprawna odpowiedź dla mnie. – carterh062

Bingo! Podobnie, 'body {margin: 0; } 'może zezwalać na elementy naprawdę i prawdziwie' width: 100%; 'w niektórych starych przeglądarkach (Android 4.1). Alternatywą może być podanie [intervening divs] (http://stackoverflow.com/a/13867800/673991) 'position: relative;' –

Z mojego doświadczenia w podobnym zagadnieniu. Kiedy twój kod nie będzie rozciągał się na urządzeniu mobilnym (ale będzie na pulpicie), naprawienie tego jest kwestią znalezienia jakiegoś elementu, który przesuwa granicę w sposób niewidoczny.Powinien być jakiś element, który wychodzi poza jego granicę - dla mnie był to obraz logo, który trzymał się około 20 pikseli poza nagłówkiem div. Możesz to znaleźć, podając wszystko za granicę lub eliminując jedną rzecz naraz. Po znalezieniu go możesz go przesunąć lub usunąć, aby wszystko wróciło do końca.

Źródło

2014-06-30 16:20:27 user1985646

100% szerokości nie obejmuje całej szerokości przeglądarki w webkit

Odpowiedz

Powiązane problemy