Блог

Главная - Вопросы по программированию - нужны абсолютные показатели в жидком макете

нужны абсолютные показатели в жидком макете

#css

#css

Вопрос:

У меня есть два дочерних подразделения в родительском div. первый дочерний div A имеет абсолютную высоту, а второй div B должен занимать остальную доступную высоту. Как это сделать? В принципе, для div я хочу, чтобы высота была такой (100% — 37 пикселей)

     <style>
    #C{
    height:100%;
width:500px;
    }

#A{
height:37px;
width:100%;
}

#B{
height: ????;
width:100%
}
    </style>

    <div id="C">
    <div id="A"></div>
    <div id="B"></div>
    </div>

Комментарии:

1. css3 calc отлично работает в этом случае, но это только для FF4. Мне нужно решение для браузеров на основе webkit (даже если решение работает только для браузера на основе webkit)

Ответ №1:

@alter, для отдыха на высоте вам нужно дать padding div B в соответствии с высотой div A 

 #B{
 padding-top:37px;
}

для примера

Ответ №2:

Я думаю, что лучший способ добиться этого — присвоить родительскому div минимальную высоту, а затем присвоить div B минимальную высоту (min-height — 37) пикселей. Смотрите код ниже

 #C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}

Пример кода:

 <html>
<head>
<style type="text/css">
    #C{min-height:600px; width:500px; background-color:yellow;}
    #A{height:37px; width:100%; background-color:blue;}
    #B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
    <div id="A"></div>
    <div id="B"></div>
</div>
</body>
</html>

Я добавил цвет к разделам, просто чтобы их различать