Statik başlık + menü, kaydırılabilir vücut

Bu benim başarmak çalışıyorum budur alanda). Temel fikri almayı başardım, ancak kaydırma çubuğu görüntülendiğinde içeriği doğru konuma getirme konusunda sorun yaşıyorum ve her zaman kaydırma çubuklarını göstermeye ayarladığım halde sabit bir genişlik kullanamıyorum çünkü tarayıcıdan tarayıcıya değişir. içerik Yukarıdaki koddaStatik başlık + menü, kaydırılabilir vücut

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> 
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"> 
     Header 
    </div> 
</div> 

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's --> 
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;"> 
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;"> 
     <div style="background-color:Orange; width:100%; height:900px;"> 
      Content 
     </div> 
    </div> 
</div> 

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;"> 
    <div style="width:500px; float:left;"> 
     <div style="background-color:Green; float:right; width:200px; "> 
      Menu 
     </div>    
    </div> 
</div>

kaydırma çubuğu genişliği, nasıl doğru sayfanın geri kalanı ile alabilirsiniz olarak kapalıdır (yani. hesaplanırken öyle o birine sahip olsa bile, kaydırma genişliğini dikkate alınmadan pozisyon)?

kaynak

2011-03-04 Danicco

+1 ASCII grafik. Ve SO üzerinde yeni bir kullanıcıdan iyi biçimlendirilmiş soru görmek her zaman güzel. –

Bu, genişlikli mi yoksa başlık tüm görünüm alanını kapsıyor mu? – roryf

Tüm "gövde" (aşağıdaki başlık, içerik + menü) sabit bir genişlikte olmalıdır. Sabit genişlik ayarlamamış olsaydım, gerçekten geniş geniş monitörlerle problemlerim vardı ... – Danicco

Ben senin sorunun doğru bu bir çözüm olacaktır anlıyorsanız: http://jsfiddle.net/7pJS8/

kaynak

2011-03-04 17:19:10 Adam

Statik başlık bölümünün sabit bir yükseklik olmadığını, ancak duruma göre değiştiğini varsayalım? Tüm pencereden ziyade, içeriği aşağıya kaydırmak için hala bir css yolu var mı? – enigment

Sabit yüksekliklerde yapmanın ve kaydırılabilir bölgelerdeki taşma özelliğini kullanmanın yolları vardır. Ancak, bu iyi bir uygulama değildir, bakmanız gereken şey, yapışkan bir üstbilgi veya kaydırma başlığı (kullanıcı tarafından yukarı ve aşağı kaydırıldığında izleme alanını takip eden) jQuery'den veya tercih ettiğiniz JS kitaplığınızdan yararlanmadır.

kaynak

2011-03-04 17:09:00 Brian

position:fixed sorunu çözmek değil mi? position:fixed değerini üstbilgi ve menü div'ına ayarlarsanız?

kaynak

2011-03-04 17:29:46

Evet, bu "standart" bir seçenek olmadığımı hatırlıyorum. Ya da belki de arka plan pozisyonuyla ilgiliydi, şimdi emin değilim. Bir deneyeceğim, teşekkürler! – Danicco

<style> 
body { 
    padding: 0px; 
} 
.container { 
    margin: 0px auto; 
    position: relative; 
    width: 500px; 
} 

#header { 
    left: 0px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index: 1000; 
} 
#header .container { 
    background: blue; 
    height: 100px; 
} 

#content { 
    background: green; 
    height: 1500px; 
    margin-top: 100px; 
} 
#content .inner { 
    margin-right: 200px; 
} 

#sidebar { 
    left: 0px; 
    position: fixed; 
    top: 100px; 
    width: 100%; 
    z-index: 1000; 
} 
#sidebar .inner { 
    background: red; 
    height: 200px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 200px; 
} 
</style> 

<div id="header"> 
    <div class="container"> 
     header 
    </div> 
</div> 
<div id="content" class="container"> 
    <div class="inner"> 
     content 
    </div> 
</div> 
<div id="sidebar"> 
    <div class="container"> 
     <div class="inner"> 
      sidebar 
     </div> 
    </div> 
</div>

Olası çözüm: - içerik uzun olduğunda http://jsfiddle.net/zWERN/

kaynak

2011-03-04 17:31:06 roryf

sayfanın tümüne bir kaydırma ayarlama, bir kaybolan başlık ve menü neden olabilir.

Aradığınız şey Holy Grail design'un bir alt kümesidir.

Here 'ın esnek ekran kullanarak bir uygulama:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <!-- No need for 'flex-direction: row' because it's the default value --> 
    <div style="display: flex; flex: 1"> 
     <div>NAV|</div> 
     <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
     </div> 
     <div>|SIDE</div> 
    </div> 
    <div>------------<br/>FOOTER</div> 
    </body> 
</html>

kaynak

2015-10-23 07:25:29

Statik başlık + menü, kaydırılabilir vücut

cevap

İlgili konular