HTML/CSS tam boy kenar çubuğu

Bu soruyla ilgili olarak internetin etrafında çok fazla tartışma ve soruya rastladım, ancak bunların hiçbiri benim durumumla eşleşmiyor ve çözümler belirli bir duruma çok özel.HTML/CSS tam boy kenar çubuğu

Sayfanın üst kısmında 100px yüksekliğine sahip bir header öğem var.genişliğindeki bir div#sidebar öğesinin sol tarafında var ve son olarak da div#main öğesinin sol tarafı da kayar.

html, body ve div#sidebar'un yüksekliği 100% dur.

Amacım, tarayıcınızın boyutuna veya içerik boyutuna bakılmaksızın sayfanın sonuna kadar aşağı doğru genişletmek için div#sidebar elde etmektir. Açıkçası, içerik görüntülenebilir sayfa yüksekliğinden uzunsa, normal davranmalı ve sayfanın sonunu kaydırıp kaydırma çubukları getirmelidir.

Ancak, şu an olduğu gibi, div#sidebar aşağı itilecek hiçbir içerik olmasa bile, sayfa yüksekliği 100% + 100px olarak hesaplanmış gibi görünüyor. Şimdiye kadar işe yarayan hiçbir çözüm bulamadım ya da belki de onu özledim ya da bir çözüme kavuştum; ne olursa olsun, bir saatten fazla bir süredir buradayım ve saçlarımı çıkarmak üzereyim.

100% eklendiğinde yüksekliğini durdurmak için bunu düzgün çalışmasını sağlayan JavaScript dışı bir yöntem var mı?

İşte HTML/CSS'm - yukarıdaki tüm ayrıntıları dahil etmeme rağmen, bu yardımcı olacaktır.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>My Awesome Template!</title> 
     <link href="./stylesheet.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <header id="primary"> 
      <h1>My Awesome Template!</h1> 
     </header> 
     <div id="sidebar"> 
      <h1>Sidebar</h1> 
     </div> 
     <div id="main"> 
      <h1>Main</h1> 
     </div> 
    </body> 
</html>

CSS: Sen rezil "sahte sütunlar" tekniği aradığınız

html, body 
{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

body 
{ 
    background: #fff; 
    font: 14px/1.333 sans-serif; 
    color: #080000; 
} 

header#primary 
{ 
    width: 100%; 
    height: 100px; 
    background: #313131; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131)); 
    background-image: -moz-linear-gradient(#4d4d4d, #313131); 
    background-image: -o-linear-gradient(#4d4d4d, #313131); 
    background-image: linear-gradient(#4d4d4d, #313131); 
} 
header#primary h1 
{ 
    margin: 0px 0px 0px 20px; 
    padding: 0px; 
    line-height: 100px; 
    color: #ffffff; 
} 

#sidebar 
{ 
    float: left; 
    width: 250px; 
    background: #ccc; 
    min-height: 100%; 
} 

#main 
{ 
    float: left; 
}

kaynak

2011-08-03 Steven Zezulak

Eğer html ve css'nizi gönderir misiniz? Bu arada burada bir göz atabilirsiniz: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/ – mamoo

Her şeyin ağaçta (çocuklar) doğru konumda olduğundan emin misiniz? yani başlık, çocuğun bir bedeni midir? –

@mamoo - HTML/CSS ile düzenlenmiş yayın. –

. İşte a tutorial.

Temel olarak, basit bir arka plan rengi ile yapamazsınız, yinelenen arka plan resmi kullanmanız gerekir.

kaynak

2011-08-03 07:53:56 Iterate

Bundan kaçınmayı umuyordum; Son zamanlarda daha minimalist ve görüntü içermeyen şablonlar için gittim. –

Üzgünüm. En iyi şekilde anlatabildiğim kadarıyla yüksek ve alçak arama yaptım, başka yolu yok. Denemedim, ama aynı arka plan rengine sahip ve kırılmayan bir boşluk (' ') içeren konumlandırma yoluyla sütunun altına eklenmiş bir div yerleştirmeyi deneyin ve bunun işe yarayıp yaramadığını görün. Varsa haber ver. – Iterate

JS kullanmadan başka bir "temiz" yol yoktur (işaretlemeyi gerçekten kirleten ve tarayıcılar arası uyumluluk için çok fazla korseyi kullanan başka teknikler gördüm, bu yüzden benim görüşüme göre iyi çözümler değiller) ... – mamoo

-3

jQuery bunu kolaylıkla hallediyor, bu yüzden neden js kullanmak istemediğinizden emin değilim. Birkaç siteden daha fazlasını kodlayan geliştiricilerin çoğu, sahip olduğum gibi sihirli cevabı arayarak önemli miktarda zaman harcadılar ve hiçbir şey js kullanmaya benzemiyor.

kaynak

2011-08-03 09:08:47

Yukarıdaki yorumda da belirttiğim gibi, yakın zamanda JavaScript ve görüntü içermeyen minimalist şablonlarla ilgilendim. JavaScript/jQuery kullanmanın kesinlikle bir yanlışlığı yoktur; Bu sadece "sihirli cevap" :) –

Daha düşük bir IE'yi umursamıyorsanız, bir üst öğe üzerinde ve öğeler üzerinde display: table-cell kullanın. Bu, yüksekliklerini birlikte düzeltmelidir. boşluk gelince, margin-top: -100 px; padding-top: 100px;

kaynak

2011-08-03 09:27:00

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

kullanıldıkça yapabileceği bu jquery kodu ile. Ana içerik yüksekliğinin çağrılması.

kaynak

2012-10-29 10:10:27

$ (". sol-sidebar, .right-sidebar") için benim arayışı oldu.Yüksekliği (Math.max ($ (". content"). yükseklik())); İki kenar çubuğunu –

Bunu denediyseniz veya sizin için işe yarayıp yaramayacağından (kodlama konusunda yeniyim) emin olun, ancak kenar çubuğunuzu sola döndürmeyi, içeriği sağa kaydırmayı, her iki metni hizalamayı sola döndürmeyi ve genişlik için yüzdelik oranları kullanın. . Başka ayarları varsa

#sidebar 
    { 
float: left; 
width: 25%; 
background: #ccc; 
min-height: 100%; 
text-align: left; 
    } 

#main 
    { 
float: right; 
text-align: left; 
width: 70%; 
    }

farklı şekilde bu yaklaşım olacaktır ama bu işe yarayabilir.

kaynak

2013-05-10 17:58:51 Jeff

this article'da açıklanan yöntemin, sorunu çözmek için çok basit bir yöntem olduğunu anladım.

... 
<div id="content"> 
    <div id="sidebar"> 
     <h1>Sidebar</h1> 
    </div> 
    <div id="main"> 
     <h1>Main</h1> 
    </div> 
</div> 
...

ve aşağıdaki css istediğini yakın bir şeyler yapacak:

#content { 
    position: relative; 
    width: 100%; 
} 
#sidebar { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 240px; 
} 
#main { 
    position: relative; 
    margin-left: 250px; 
}

Çok html kodu haline gelir, başka div ile #Sidebar ve #main div'leri çevreleyen gerekir

(örneğin biraz hata ile örneğin # 1'deki h1 kenar boşluğunun göz ardı edildiğini fark ettim ... ama kenar çubuğundaki h1 kenar boşluğu değildi!).

kaynak

2013-11-18 06:44:50

Hatalı bağlantıyı karıştırabilirsiniz. Ya doğru olanla değiştirebilir misin yoksa kaldırır mısın? – vastlysuperiorman

Internet Arşivinden https://web.archive.org/web/20150227203316/http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/ - umarım bu biraz daha uzun yaşayacak ... –

HTML/CSS tam boy kenar çubuğu

cevap

İlgili konular