Çocuk div max yüksekliğini

Question

yapın

.box-content kutu içinde bırakılan maksimum yüksekliği almak için çalışıyorum çalışıyorum. Bir div.box-header ve bir .box-content kutuA/boxB div içinde var. .box-content, div'u .box-header ile paylaşıyor.

Bu JSFiddle içinde, .box-content ana div ana dışarı gidiyor olduğunu görebilirsiniz.

nasıl saf CSS bu 2 kurallarla hesabında alarak bu çözebilir:

1. gerilebilir olduğu .box-content yüksekliği (büyümek/zaman pencere boyutu değiştiğinde küçültmek);
2. .box-content, en az 200 piksel uzunluğundadır;

   .box-content, yani ana% 100 olarak ayarlanır aynı zamanda öylesine .box-content aşağı doğru itilir ebeveyn içindedir ve (boyutunu taşmaya sahiptir .box-header vardır:

Answer 1

overflow (burada hayatınızı kolaylaştırır hissediyorum) bir seçenek ise, burada

aşağıya css (2 satır değişiklikleri), bir demo

tutulması HTML aynıdır

.boxA { 
    width: 220px; 
    padding: 0px 3px 5px 5px; 
    float: left; 
    height: 100%; 
    margin-bottom: 0px; 
    border: solid 1px green; 
    overflow:hidden; /*added this*/ 
} 

.boxB { 
    width: 420px; 
    padding: 0px 5px 5px 3px; 
    float: right; 
    height: 100%; 
    border: solid 1px red; 
    overflow:hidden;/*added this*/ 
} 

Answer 2

karşılaştığınız sorun .box-content) ebeveyninin% 100 yüksekliğini korumak için.

Bu css önerebilirsiniz:

.box-content { height: 90%; } 

.box-header { 
    position: relative; 
    background-color: green; 
    padding:11px 8px 5px; 
    color: white; 
    height:10%; 
} 

bu FIDDLE

Answer 3

Sen çocuk div daha büyük bir yüksekliğe sahip olması halinde kaydırılabilir olması ebeveyn div'leri ayarlayabilirsiniz Bkz.

.boxA{ overflow:auto; } .boxB{ overflow:auto; }