Предотвратить высоту div на «0»

Question

Предотвратить высоту div на «0»

0

У меня есть эта структура html: -

<div id="middle">
    <div id="category_container_1" class="category_container" rel="1">
        <div class="big"><img src="catalog/view/theme/default/images/1-big.png"></div>
        <div class="small"><img src="catalog/view/theme/default/images/1-6.png"></div>
    </div>
    <div id="category_container_2" class="category_container" rel="2">
        <div class="big"><img src="catalog/view/theme/default/images/1-big.png"></div>
        <div class="small"><img src="catalog/view/theme/default/images/1-6.png"></div>
    </div>
</div>

и CSS выглядит так:

#middle {
    position:relative;
    width:100%;
    max-width: 960px;
    height:auto;
    margin: 0px auto;
    padding-bottom:70px;
    background-color:#FFFFFF;
    overflow:auto;
}
.category_container{
    width:100%;
    height: auto;
    clear:both;
}

Я установил для.category_container высоту: auto, так как содержимое внутри расширит div вниз, а внешний вид html отлично работает.

Однако при просмотре в хроме он показывает category_container_1, category_container_2 - 960px x 0px, из-за высоты: auto в CSS (я пытался изменить его на 100px, и он показывает на хром как 960px x 100px).

В этом случае, как я могу сделать div в chrome равным 960px x фактическим px для этих div?

user2122657 18 фев. 2014, в 18:18

Источник

0

возьмите пожалуйста Благодарю.
Hendra Nucleo 18 фев. 2014, в 16:32
0

Я вижу нормальную высоту jsfiddle.net/j08691/M6TqB . Около 659х50.
j08691 18 фев. 2014, в 16:33
0

Демо здесь: demo.nevertoolate.com.hk/lee125
user2122657 18 фев. 2014, в 16:35
0

Я нашел ответ. Поскольку содержимое внутри плавающего влево, мне нужно добавить display: inline-block в .category_container, чтобы он отображался нормально. Спасибо!
user2122657 18 фев. 2014, в 16:57

Показать ещё 2 комментария

Теги:

html

css

3 ответа

Ещё вопросы

Я вижу нормальную высоту jsfiddle.net/j08691/M6TqB . Около 659х50.
Я нашел ответ. Поскольку содержимое внутри плавающего влево, мне нужно добавить display: inline-block в .category_container, чтобы он отображался нормально. Спасибо!

FabioG · Answer 1 · 2014-02-18T15-30-00.000Z

используйте min-height: в вашем css и дайте ему значение выше, чем 0

Inept Adept · Answer 2 · 2014-02-18T13-51-00.000Z

Попробуйте использовать минимальную высоту

.category_container{
    width:100%;
    height: auto;
    min-height : valueabove 0 ;
    clear:both;
}

Я добавил min-height: 1px, но он только показал 960px x 1px ...

Alvaro Menéndez · Answer 3 · 2014-02-18T14-26-00.000Z

поскольку контент будет меняться динамически, я думаю, вы могли бы попробовать:

#middle {
position:relative;
width:100%;
max-width: 960px;    
margin: 0px auto;
padding-bottom:70px;
background-color:#FFFFFF;
overflow:hidden; min-height:1px;

но с переполнением: скрытый, вам не нужна минимальная высота, вероятно