css% 100 genişlik div üst genişliğini tam olarak almıyor

Bir sayfada iki div var. Bir arka plan ve diğer kılavuzun merkezinde konumlandırılması gereken bir iç ızgara alan bir ızgara kabı. Benim css: Bu noktadacss% 100 genişlik div üst genişliğini tam olarak almıyor

html, body{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    width:100%; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

, # şebekeye kabın bg resmi yalnızca pencere, html değil tam genişliği doldurur. Bunun nedeni, tarayıcı penceresini yatay bir kaydırma çubuğu gerektirecek ve sayfayı yenileyecek şekilde daraltmanız durumunda, tarayıcı penceresinin bittiği yerde bg görüntünün sona ermesidir. Sağa kaydırdığımda, bg resmi orada değil. Fikirler?

DÜZENLEME: Tamam, istekleri başına, benim css/html kaydetmiştiniz. # Izgara kabındaki genişlik işaretini kaldırdığımda, içindeki kabın genişliğine küçülür, bu da daha da kötüdür. İşte ne var şimdi var:

html, body{ 
    margin:0; 
    padding:0; 
    min-width:1140px; 
} 
body{ 
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    padding-top:1px; 
} 
#grid-container2{ 
    width:1140px; 
    margin:0px auto; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

ve html:

<!DOCTYPE HTML> 
<html> 
<head> 
--- 
</head> 

<body> 
... 
<div id="grid-container" class="clearfix"> 
<div id="grid">..all kinds of things in here</div> 
</div>

kaynak

2011-08-24 panzhuli

HTML'nizi lütfen ekleyebilir miyim? –

Bu mantıklı. Tarayıcıya, tarayıcının genişliğini% 100 olarak ayarlamasını söylersiniz. – Luuk

Genişliği kaldır:% 100 ve bu işlemi yapmalıdır. http://www.impressivewebs.com/width-100-percent-css/ –

Sorun #grid bir width:1140px olmasından kaynaklanır.

Sen body bir min-width:1140px ayarlamanız gerekir.

Bu #grid daha küçülüyor gelen body duracaktır. width:100%, blok seviyesi öğeleri varsayılan olarak kullanılabilir genişliğe sahip olduğu için kaldırın. Canlı örnek: http://jsfiddle.net/tw16/LX8R3/

html, body{ 
    margin:0; 
    padding:0; 
    min-width: 1140px; /* this is the important part*/ 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

kaynak

2011-08-24 15:12:07 tw16

, # ızgara kabı hala genişliğe ihtiyaç duyuyordu:% 100. Neden olduğundan emin değilsin, ama işte gidiyorsun. Teşekkürler! – panzhuli

"Genişlik kaldır:% 100 blok düzeyindeki öğeler varsayılan olarak kullanılabilir genişliğe sahip olur." - sadece aradığım konferansa teşekkürler –

width:100%; bildirimleri çıkarın.

Blok elemanları varsayılan olarak tüm kullanılabilir genişliğini almalıdır.

kaynak

2011-08-24 15:04:23 Geert

Doğru, teşekkürler! Herhangi bir nedenle – RynoRn

html, body{ 
    width:100%; 
}

Bu html% 100 genişliğinde olması söyler. Ancak% 100, tüm tarayıcı penceresi genişliğini ifade eder, bu yüzden bundan fazlası yoktur.

Bunun yerine bir min genişliği ayarlamak isteyebilirsiniz.

html, body{ 
    min-width:100%; 
}

En az% 100, yani gerekirse daha fazla% 100 olacaktır.

kaynak

2011-08-24 15:04:33

css% 100 genişlik div üst genişliğini tam olarak almıyor

cevap

İlgili konular