Дивы торчат из родительского дива

Question

Дивы торчат из родительского дива

0

Я проектирую сайт корзины покупок, где у меня есть несколько родительских div, а также дочерние divs следующим образом. Проблема - это те divs, где я установил высоту: auto не расширяется, когда возрастает контент для ребенка. Нет, в моем случае мне нужно было добавить еще один набор (3) держателей элементов (уже он имеет 3 и соответствует содержимому ) внутри элементов div, но когда я делаю это, выпрыгивает из родительского div. Пожалуйста помоги мне с этим.

Мой HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>diluks eCommerce - Home</title>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
  <div class="level1">
    <div class="profile-bar"></div>

  </div>
  <div class="level2">
    <div class="logoarea"><img src="img/logo-bar.png" width="1000" height="100" /></div>

  </div>
  <div class="level3">
    <div class="body-content">
      <div class="side-bar"></div>
      <div class="nav-menu"></div>
      <div class="image-slider"><img src="img/main-img.png" width="785" height="220" /></div>
      <div class="seperate-space">
        <div class="separate-title"><a class="bold-captions">Latest Picks</a></div>


      </div>
<div class="items">
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/sunflowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/treecard.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/3-flowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>


</div>
    </div>


  </div>
  <div class="level4">
    <div class="footer-area">
      <div class="space-line"></div>
    </div>


  </div>
</div>
</body>
</html>

Моя таблица стилей CSS

@charset "utf-8";
.container {
    height: auto;
    width: 100%;
}
body{
    margin:0px;
    padding:0px;
    background-color:#F2F2F2;

    }.container .level1 {
    height: 35px;
    width: 100%;

}
.container .level2 {
    height: 100px;
    width: 100%;

}
.container .level3 {
    height: auto;
    width: 100%;
    min-height:685px;
}
.level3 .body-content {
    height: 100%;
    width: 1000px;
    min-height:685px;
    margin:auto;
}
.body-content .side-bar {
    float: left;
    height: 100%;
    width: 200px;
    min-height:685px;
    background-color:#CACACA;

}
.body-content .nav-menu {
    float: left;
    height: 35px;
    width: 800px;

    background-color:#CACACA;
}
.body-content .items {
    float: left;
    height: auto;
    width: 785px;
    min-height:335px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;
    position:relative;


}
.logoarea {
    height: 100px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#CACACA;
}
.profile-bar {
    height: 35px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#666;
}
.image-slider {
    float: left;
    height: 220px;
    width: 785px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;

}
.level4 {
    height: auto;
    width: 100%;
    min-height:150px;
}
.space-bar{
    height: 15px;
    width: 100%;
    }
.space-line{
    height: 15px;
    width: 100%;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#666;
    }   .footer-area {
    height: auto;
    width: 1000px;
    margin:auto;
    min-height:150px;
}
.seperate-space {
    float: left;
    height: 35px;
    width: 785px;
    padding-left:15px;
}
.separate-title {
    float: left;
    height: 28px;
    width: 780px;
    background-color:#CACACA;

    padding-top:7px;
    padding-left:5px;

}
.items .item-holder {
    float: left;
    height: 335px;
    width: 260px;
}
.item-info{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#333;
    }
.bold-captions{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#333;
    }

Демо-версия JSFiddle

Dilukshan Mahendra 19 фев. 2014, в 06:07

Источник

5

Вы можете поместить свой код в jsfiddle? Так что мы можем помочь вам лучше.
BhushanK 19 фев. 2014, в 04:37
0

Попробуйте использовать overflow: hidden .
helderdarocha 19 фев. 2014, в 04:41
0

Переполнение: автоматический ответ ниже работает, но потратьте несколько минут, чтобы прочитать этот пост и ознакомиться с плавающими и очистить их. impressivewebs.com/clearing-floats-why-necessary
keithwyland 19 фев. 2014, в 04:55
0

@Bhushan JSFiddle Демо есть ..
Dilukshan Mahendra 19 фев. 2014, в 05:06

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

Теги:

html

css

3 ответа

3

Добавить overflow: auto

.container .level3 {
   height: auto;
   width: 100%;
   min-height: 685px;
   overflow: auto;
}

Mahesh Sapkal 19 фев. 2014, в 02:10

2

Я бы порекомендовал ОП прочитать этот пост, чтобы получить четкое представление о том, что означает очистка поплавков: amazingwebs.com/clearing-floats-why-needed
keithwyland 19 фев. 2014, в 04:54
0

боковая панель все еще на минимальной высоте
ariel 19 фев. 2014, в 05:09
0

@Mahesh Sapkal Добавляет горизонтальную полосу прокрутки, а не то, что мне нужно
Dilukshan Mahendra 19 фев. 2014, в 05:24
0

Хорошо. поставить переполнение: скрытый вместо.
Mahesh Sapkal 19 фев. 2014, в 05:27
0

@MaheshSapkal Тем не менее, он разбивает контейнер, а также содержимое тела, в JSFiddle не может видеть границы div, поэтому в js fiddle это выглядит нормально, но в dreamweaver вы можете увидеть свертывание
Dilukshan Mahendra 19 фев. 2014, в 05:42

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

0

Добавить float: осталось до всех ваших уровней divs

.level1,.level2,.level3,.level4{
        float:left;
    }

Sarath 19 фев. 2014, в 03:45

0

Он правильно опускает нижний колонтитул и добавляет держатели элементов, как я и ожидал, но содержимое тела остается на той же высоте, где тогда элементы div выпрыгивают из содержимого тела, которое является их родителем, какие-либо предложения?
Dilukshan Mahendra 19 фев. 2014, в 05:29
0

включите библиотеку jquery и добавьте следующий код javascript <script> $( document ).ready(function() { $(".side-bar").height($(".level3").height()); }); </script>
Sarath 19 фев. 2014, в 05:57

Ещё вопросы

Вы можете поместить свой код в jsfiddle? Так что мы можем помочь вам лучше.
Попробуйте использовать overflow: hidden .
Переполнение: автоматический ответ ниже работает, но потратьте несколько минут, чтобы прочитать этот пост и ознакомиться с плавающими и очистить их. impressivewebs.com/clearing-floats-why-necessary
Я бы порекомендовал ОП прочитать этот пост, чтобы получить четкое представление о том, что означает очистка поплавков: amazingwebs.com/clearing-floats-why-needed
боковая панель все еще на минимальной высоте
@Mahesh Sapkal Добавляет горизонтальную полосу прокрутки, а не то, что мне нужно
Хорошо. поставить переполнение: скрытый вместо.
@MaheshSapkal Тем не менее, он разбивает контейнер, а также содержимое тела, в JSFiddle не может видеть границы div, поэтому в js fiddle это выглядит нормально, но в dreamweaver вы можете увидеть свертывание
Он правильно опускает нижний колонтитул и добавляет держатели элементов, как я и ожидал, но содержимое тела остается на той же высоте, где тогда элементы div выпрыгивают из содержимого тела, которое является их родителем, какие-либо предложения?
включите библиотеку jquery и добавьте следующий код javascript <script> $( document ).ready(function() { $(".side-bar").height($(".level3").height()); }); </script>

ariel · Accepted Answer · 2014-02-19T04-47-00.000Z

Я думаю, что это то, что вы хотите: http://jsfiddle.net/bortao/XpSXK/

Сначала нужно было использовать clearfix на level3 чтобы там содержался плавающий контент (ваш основной вопрос).

Тогда возникла проблема с боковой панелью: она всегда заканчивалась на ней минимальной высотой. поэтому установите его на height:100% имеют эффекта. Кроме того, если после этой минимальной высоты есть контент, он будет выровнен слева от боковой панели.

Поэтому я привел side-bar вне body-content чтобы все содержимое выровнялось справа от боковой панели.

И, наконец, чтобы остальная часть боковой панели и тот же цвет, установить цвет фона level3 в темноте (такой же, как боковой панели), а также body-content фонового света, так же, как тело.