CSS Div yüksekliği% 100 eksi nPx nasıl ayarlanır

200

Yan yana 2 div kaplayan bir sarıcı div var. Bu kabın üstünde başlığımı içeren bir div var. Sarıcı div, başlığın yüksekliğinin% 100 eksi olması gerekir. Başlık yaklaşık 60 pikseldir. Bu düzeltildi. Benim sorum şu: Sarıcı divimin yüksekliğini% 100 eksi 60 piksel olacak şekilde nasıl ayarlayabilirim?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>
css  height 
— Martijn
kaynak
16
Gerçekten w3c genişliğine bazı değer eksi sabit özellik eklemeyi düşünüyor diliyorum, onlar genişliği sınırları dahil unuttum ama bu iki şey mevcut olsaydı CSS kesmek çoğu yok olacağını tanımını değiştirmek gerekirdi.
— samarjit samanta

Yanıtlar:

79

İşte Firefox / IE7 / Safari / Chrome / Opera altında test edilen çalışan bir css.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" w3c onaylı değildir, ancak her büyük tarayıcı bunu destekler. İki div #left ve #right, içeriği çok yüksekse dikey kaydırma çubuğu görüntüler.

Bunun IE7 altında çalışması için, bir DOCTYPE ekleyerek standartlara uygun modu tetiklemeniz gerekir: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>
Snippet'i genişlet

— Alsciende
kaynak
FF çalışır, ancak i; t IE7 altında çalışmak olsun. Yalnızca 'Başlık' Kodunu görüyorum: <div id = "header"> Başlık </div> <div id = "wrapper"> <div id = "sol"> Sol </div> <div id = "sağ"> Sağ </div> </div>
— Martijn
Standartlara uygun modu tetiklediniz mi? Yanıtımda bir örnek sayfa ekleyeceğim.
— Alsciende
1
Ayrıca, bu div'leri sayfanın ortasına veya başka bir yere yerleştirmeniz gerekiyorsa, bunları bir konteyner div'sine sarın ve position: relativekaba yerleştirin. Ardından kabı sayfada istediğiniz yere yerleştirin.
— Mrchief
iç div hakkında, örneğin #left içinde, ilgili yükseklikleri% 40 ve% 60 olan 2 div istersem?
— TecHunter
0 değer parametrelerinde neden px belirtildiğine dair özel bir neden var mı?
— Cassandra
277

CSS3'te şunları kullanabilirsiniz: 

height: calc(100% - 60px);
— libjup
kaynak
25
"-" işaretinden önce ve sonra boş alanınız olduğundan emin olun. Firefox'ta "-" işaretinden önce yer olması gerekir.
— Codler
7
mükemmel. CSS3 bunu yapabilir bilmiyordum.
— Tom Beech
Vaov! tam olarak ne istediğimi. Teşekkürler.
— Sandhu
1
Bu harika
— Mirko
47

IE6'yı desteklemeniz gerekiyorsa, JavaScript'i kullanarak sarıcı div'in boyutunu yönetin (pencere boyutunu okuduktan sonra öğenin konumunu piksel cinsinden ayarlayın). JavaScript kullanmak istemiyorsanız, bu yapılamaz. Geçici çözümler var, ancak her durumda ve her tarayıcıda bir veya iki hafta çalışmasını bekliyoruz.

Diğer modern tarayıcılar için bu css'yi kullanın:

position: absolute;
top: 60px;
bottom: 0px;
— Aaron Digulla
kaynak
Site sadece IE 7 uyumludur. Yükseklik:% 100 ve üst: 60 piksel; Hala bir kaydırma çubuğuna sahibim. 60 piksel aşağı kaydırabilirim.
— Martijn
4
Bir yükseklik belirtmeyin, üst ve alt kullanın ve tarayıcının yüksekliği hesaplamasına izin verin.
— Aaron Digulla
Ancak sayfamın maksimum yüksekliği% 100 eksi 60 piksel olsun istiyorum; İçerik bundan daha büyükse, taşma kullanarak div'de kaydırma çubukları istiyorum: scroll;
— Martijn
4
Kaydırma çubuğu için, sargının içine tamamen dolduran bir div ekleyin ve bu taşmayı gerçekleştirin: scroll;
— Aaron Digulla
IE7'deki hatalar nedeniyle bunun hala başarısız olabileceğini unutmayın. Çalıştıramazsanız JavaScript kullanın. Biliyorum, sevmiyorsunuz, ama garip böceklerle mücadele eden bir haftalık çalışmaya karşı ağırlıklandırın.
— Aaron Digulla
6

büyük bir ... şimdi% o he kullanarak durdu ... aşağıda gösterildiği gibi ana konteyner hariç:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

ve işte css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

Ben bilinen tüm tarayıcılarda bu test ve iyi çalışıyor. Bu yolu kullanmanın herhangi bir dezavantajı var mı?

— Jayaveer
kaynak
4

Yükseklik gibi bir şey yapabilirsiniz : calc (100% - nPx); örneğin yükseklik: kalk (% 100 - 70 piksel);

— DRB
kaynak
2 
div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Daha az kullanırken emin olun 

height: ~calc(100% - 60px);

Aksi takdirde, daha az doğru derlemek olmaz

— Dadhich Sourav
kaynak
0

Bu, sorulan soruya tam olarak cevap vermez, ancak elde etmeye çalıştığınız aynı görsel efekti oluşturur.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>
— Noel Walters
kaynak
0

Bu örnekte farklı alanları tanımlayabilirsiniz:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>
— Renzo Ciot
kaynak
0

Henüz böyle bir şey görmedim, ama oraya koyacağımı düşündüm. 

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Sonra CSS:

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

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

İşte çalışan bir jsfiddle

Not: Bunun için tarayıcı uyumluluğunun ne olduğu hakkında hiçbir fikrim yok. Ben sadece alternatif çözümlerle oynuyordum ve bu işe yaradı.

— FreedomMan
kaynak
-1

% 100'e ayarlanmış bir dış sarmalayıcı div kullanın ve daha sonra iç sarmalayıcı div% 100'niz şimdi buna göre olmalıdır.

Bunun eskiden benim için çalışacağından eminim, ama görünüşe göre değil:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>
— Cade Roux
kaynak
Buna bir örnek verebiliriz. Anlamıyorum
— Martijn
Ne düşündüğümü yayınladım, ancak bu erken / geç çalışmasını sağlayamıyorum. Belki biraz daha uyursam.
— Cade Roux
-1

Mutlak konumlandırmayı ve tüm bu cazları kullanmak istemiyorsanız, kullanmayı sevdiğim bir düzeltme:

html'niz:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}
— scotsqueakscoot
kaynak
1
Bunun beklendiği gibi çalıştığını düşünmüyorum. İlk #headerolmalı margin-top:-60px;. İkincisi, height:100%yüksekliğin kenar boşlukları, dolgu ve kenarlıklar hariç ana eleman yüksekliğinin% 100'ü olacağı anlamına gelir. Kaydırma ayarlarınıza bağlı olarak, bu kaydırma çubuklarının görünmesine veya içeriğinizin kırpılmasına neden olur.
— Kylos
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.