1. ev
  2. Soru-cevap
  3. Sabit başlıklı kaydırılabilir div içerik alanı

Sabit başlıklı kaydırılabilir div içerik alanı

2016-04-09 24 views
2

Aşağıdaki html için bir tarayıcı kaydırma çubuğu alıyorum, Mavi içerik alanındaki kaydırma çubuğunu ve yeşil üstbilginin sabit kalmasını isterim. Denedim overflow:auto yardımcı değil.Ne burada yanlış alıyorum?Sabit başlıklı kaydırılabilir div içerik alanı

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    </head> 
<body style="width: 100%; height: 100%; padding: 0; margin: 0"> 
    <div style="background: green; font-size: 20px; height: 100px"> 
     Header 
    </div> 
    <div style="background: blue; overflow: auto;"> 
     <div style="height: 1000px"> 
     content 
     </div> 
    </div> 
</body> 
</html>

kaynak

2016-04-09 anivas

+0

Eğer' taşma-y denediniz? – Pedram

+0

_ “Denenmiş taşma: otomatik olarak yardım etmiyor. Burada yanlış anlamıyorum?” _ - taşma işlemini uygulamak istediğiniz öğe için bir yükseklik belirtmeniz gerekiyor - aksi takdirde yalnızca içerik talepleri. – CBroe

cevap

2

Böyle bir şey denemelisiniz: CSS kodu böyle olmalı

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="header"></div> 
    <div class="content"> 
    Some content 
    <div style="height: 2000px"></div> 
    Some other content 
    </div> 
</body> 
</html>

Ve:

body { 
    padding: 0; 
    margin: 0; 
    width: 100vw; 
    height: 100vh; 
} 

.header { 
    height: 100px; 
    background: orange; 
} 

.content { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: tomato; 
    overflow: auto; 
}
http://jsbin.com/cekahesida/edit?html,css,output

HTML kodu şöyle bir şey olmalı

Amaç, body tam ekranını uzatmaktır (aracılığıyla)ve height: 100vh;). header normal olarak eklenir, ancak content, ekranın geri kalanı boyunca isteğe bağlı kaydırma çubuğuyla (overflow: auto aracılığıyla) kesinlikle gerilir.

content ürününün height ve ile ayarlarını yapmaya dikkat etmeniz yeterlidir.

kaynak

2016-04-09 09:45:04 alesc

0

Aradığınızı bulmak için iyi bir örnek. https://jsfiddle.net/letalumil/zVzD6/

<html> 
    <header> 
    </header> 
    <body> 
    <div id="wrapper"> 
    <div>header</div> 
    <div id="content"> 
    <div class="scroll"> 
     <div class="temp">content</div> 
    </div> 
    </div> 
    </div> 
    </body> 
    </html>

Kişisel css

html, body { 
height: 100%; 
} 
#wrapper:before { 
content:''; 
float: left; 
height: 100%; 
} 
#wrapper { 
height: 100%; 
} 
#content { 
position: relative; 
background: green; 
} 
#content:after { 
content:''; 
display: block; 
clear: both; 
} 
    .scroll { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
    } 
    .temp { 
    height: 1000px; 
    }

kaynak

2016-04-09 09:51:30

+0

Çözümünüz biraz karmaşıktır. Ayrıca, 'body' üzerinde marj: 0; – alesc

İlgili konular

 İlgili konular