Yeni duyarlı tasarımımda tabloyu kullanmaktan kaçınmak için 3 gün boyunca çalışıyorum, çünkü herkes kötülük olduğunu söylüyor. Öte yandan, SEO ve masa üzerinde daha fazla araştırma yaparken, bazı insanlar bile görünürlüğünü artırdığını söylüyor.IE 10 yükseklik tablosu% 100 olduğunda CSS ekranıyla ilgili hata?
Her durumda, semantik, div ve HTML5 ile çok daha güzel, bu nedenle aşağıdaki örnek çalışmayı gerçekten yapmak isterim. Ana problem, IE9 & 10'da "bölüm satırı", "yükseklik% 100" değeri nedeniyle taşacak olmasıdır. Diğer tüm tarayıcılar iyi tepki veriyor gibi görünüyor.
herkes bu çözmek için nasıl biliyor mu (ideal Javascript olmadan?):
JSFiddle: http://jsfiddle.net/fvqvdske/1/
Fullsize sayfasını IE10 yılında emülasyon modunu test etmek: http://jsfiddle.net/fvqvdske/1/show
tek sorun olduğu taşma ve IE9, 10 - orta sıra, üstbilgi ve altbilgi tarafından bırakılan tüm alanı doldurmak zorundadır (üstbilgi ve altbilgi, içeriğine dinamik olarak uyacak şekilde yüksekliği ayarlayabilmelidir o sabit, mutlak konum yok).
HTML
<body>
<header role="banner">
<div>
<div>
This is the top banner
</div>
</div>
</header>
<section role="main">
<div>
<div>
<div>
<div>
<div style="border: 2px solid red;">
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
</div>
</div>
</div>
</div>
</div>
</section>
<footer role="contentinfo">
<div>
<div>
This is the footer
</div>
</div>
</footer>
</body>
bu soru üzerine birkaç gün geçirdikten sonra CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: table;
position: absolute;
border-spacing: 0;
border-collapse: collapse;
}
header, footer, section {
display: table-row;
text-align: center;
vertical-align: middle;
height: 1px;
}
header > div, section > div, footer > div {
display: table-cell;
vertical-align: middle;
}
header > div > div,
section > div > div,
section > div > div > div,
footer > div > div {
max-width: 400px;
width: 100%;
margin: auto;
background-color: brown;
}
section,
section > div,
section > div > div,
section > div > div > div,
section > div > div > div > div {
box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222;
height: 100%;
vertical-align: middle;
}
section > div {
display: table-cell;
width: 100%;
height: 100%;
}
section > div > div {
display: table;
margin: auto;
}
section > div > div > div {
display: table-row;
}
section > div > div > div > div {
display: table-cell;
}
section {
}
/* temp */
header {
background-color: pink;
}
section {
background-color: yellow;
}
footer {
background-color: orange;
}
Its çirkin böcek: Bu makale muhtemelen en iyi burada durum yansıtır? display: flex; 'http://jsfiddle.net/GXe9m/2/ – jagmitg
Flexbox projem için yeterince desteklenmiyor: http://caniuse.com/#search=flexbox - Bunun bir hata olduğundan emin misiniz? etrafında çalışmak için yapabileceğimiz bir şey yok mu? CSS'yi temizlemek ve izlemeyi biraz daha kolaylaştırmak için küçük bir güncelleme yaptım. –
Şahsen, ekran: tablo, tablo satırı ve tablo hücresi kullanmak zorunda kalsaydım, gerçek HTML tablolarını kullanırdım. Bana kafa karıştırıcı geliyor. SEO argümanını hiç duymadım. Bunun hakkında daha fazla bilgi içeren bir bağlantınız var mı? –