CSS - проблема с фиксированной высотой div

Question

По сути, я не могу получить div, содержащий весь контент, чтобы двигаться вниз вместе с самим контентом.Если я уберу фиксированную высоту в div комбокера, он исчезнет.Содержимое остается на месте, хотя поверх изображения BG.Кто-нибудь видит какое-либо решение этого?Я много пробовал и ничего не могу придумать.Я просто хочу основать высоту содержимого div на высоте содержимого, как обычно работает div.Спасибо большое!

Вот сайт: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1

Вот соответствующий CSS:

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }

div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}

div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}

Вот соответствующий HTML:

<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
  <div class="comcon abs" style="opacity:none;">
    <div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">

        <?php
            if($_GET['page'] == "profile") {
                include_once('profile.php');
            }
            if($_GET['page'] == "editprofile") {
                include_once('editprofile.php');
            }                   
        ?>  

    </div>
  </div>
</div>

Answer 1

Сделайте следующее:

body.combody {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
    background-origin: padding-box;
    background-position: left center;
    background-repeat: repeat;
    background-size: 110% auto;
    height: 100%;
}

div.comborder {
    background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
    border-radius: 30px 30px 30px 30px;
    height: 100%;
    width: 900px;
    z-index: 10;
}

Важно отметить, что и тело, и div имеют рост 100%.

Это может помочь вам.

Answer 2

Абсолютное позиционирование удаляет содержимое div (и все остальное) из потока страницы.Это делает так, чтобы контейнеры не знали размер внутренних элементов.

Удалите все классы .abs из всего внутри контейнера, и белый фон будет правильно растягиваться, как вы хотите.Однако он также простирается за черную границу, поэтому вам придется искать другой способ его создания.

Более общий совет:

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }

Это просто плохие идеи.Похоже, вы видели или говорили о том, что всегда помещаете CSS в файл CSS, а не в HTML;хорошая идея, когда все сделано правильно, но классы должны идентифицировать контент, а не стили.Например:

.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }

Создает дублирующую позицию: теги и т. Д., Но это также намного проще для понимания и гораздо проще получить желаемые результаты, так как решение вашей текущей проблемы включает в себя редактирование HTML, когда ондолжна быть проблема CSS.