6
germe gelen tablo hücre ben aşağıdaki HTMLönle div:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
sorun div.table bütünü işgal etmek içindir iken div.center, içeriğini uygun uzanan olmasıdır viewport ve div.center içeriğinin geri kalanı görünmez olmalıdır. Ne overflow:hidden ne de piksel cinsinden belirgin genişlik ayarı (örneğin 900px) yardımcı olur.
Sorunu nasıl düzeltebileceğimize dair herhangi bir fikre çok minnettar olurum.
Teşekkürler, mükemmel çalışıyor. Ancak, div.wide'unun ebeveyninin% 100 yüksekliğini uzatmaya nasıl zorlayacağınızı önerebilir misiniz? 'height: 100%' sadece Webkit tarayıcılarında çalışır ve mutlak konumlandırma ile üst: 0; alt: 0; 'taşmaya neden olur kaydırmalar taşmasına neden olur: gizli '… – Alexey
Gördüğünüz sorunlar tablo düzeninin benzersiz davranışından kaynaklanır. algoritmaları. Sorun, HTML4/CSS2'nin, taşma ve konumlandırma ana hücrelerle etkileşime girdiğinde ne olması gerektiği konusunda oldukça belirsizdir. Çoğu tarayıcı kendi şeylerini yapıyor gibi görünüyor. CSS yüksekliği belirtir:% 100, yalnızca ebeveynin açık bir yüksekliğe sahip olması durumunda geçerlidir; bu nedenle, '.center' – SpliFF
'tablonun mizanpajında sabit bir yükseklik ayarlayarak başlar:' sabit ', Safari'deki bazı genişlik sorunlarına neden olabilir. – Mike