содержания DIV протекающей в другую DIV

https://jsfiddle.net/nwq3v3t2/1/содержания DIV протекающей в другую DIV

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#footer-content { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    /* top: 2px; */ 
 
    /* left: 2px; 
 
    right: 2px; */ 
 
    text-align: right; 
 
    font: bold; 
 
} 
 

 
.hp_wgt_row { 
 
    min-width: 33.33%; 
 
    min-height: 33.33%; 
 
    height: 33.33%; 
 
    /* border: 2px black solid; */ 
 
    position: relative; 
 
} 
 

 
.hp_wgt_col { 
 
    min-width: 33.33%; 
 
    min-height: 33.33%; 
 
    height: 33.33%; 
 
    padding: 2px; 
 
    position: relative; 
 
} 
 

 
.hp_wgt_header { 
 
    background-image: linear-gradient(45deg, blue, red); 
 
    color: #fff; 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    height: 23px; 
 
    padding: 2px 12px; 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 

 
.hp_wgt_content_wrapper { 
 
    /* position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    overflow: hidden; */ 
 
    min-height: 200px; 
 
} 
 

 
.hp_wgt_content { 
 
    width: 90%; 
 
    margin: 3px auto; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
.hp_wgt_circular_ul { 
 
    /* height: 90%; */ 
 

 
} 
 

 
.hp_wgt_circular_ul li { 
 
    color: black; 
 
} 
 

 
.hp_wgt_circular_ul li:nth-child(odd) { 
 
    background-color: #e5e5e5; 
 
} 
 
/* .hp_wgt_circular_ul li:nth-child(even) { 
 
    background-color: blue; 
 
} */

<div style="height: 100%;"> 
 
     <div class="container-fluid" style="height: 95%;">   
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Circular</div> 
 
        <div class="hp_wgt_content_wrapper"> 
 
         <div class="hp_wgt_content"> 
 
          <ul class="list-group hp_wgt_circular_ul"> 
 
           <li class="list-group-item">Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1</li> 
 
           <li class="list-group-item">Circular 2 Circular 2 Circular 2 Circular 2 Circular 2 Circular 2</li> 
 
           <li class="list-group-item">Circular 3</li> 
 
           <li class="list-group-item">Circular 4</li> 
 
           <li class="list-group-item">Circular 5</li> 
 
           <li class="list-group-item">Circular 6</li> 
 
          </ul> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Logo</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Login</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Phone Database</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Photo Gallery</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">News</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Links</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Events</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Others</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div>

Список перекрывается с нижними делами. Я пробовал фиксированную высоту и переполнение, но полоса прокрутки выглядит ужасно, а в полноэкранном режиме браузера между разделителями есть разрыв. Мне нужно, чтобы содержимое внутри .hp_wgt_content должно поддерживать высоту и перекрывающуюся дисциплину независимо от размера экрана.

Я полный noob при веб-дизайне.

источник

2016-10-19 user1115851

Можете ли вы показать дизайн, который хотите? – yashpandey

Возможно, вам нужно использовать какой-либо jquery-плагин, подобный этому [http://masonry.desandro.com/](http://masonry.desandro.com/) – tejashsoni111

@yashpandey Если вы попробуете проверить скрипку и развернуть панель вывода , содержимое под заголовком заголовка перетекает в заголовок базы данных телефона. Мне нужно, чтобы контент оставался внутри .hp_wgt_content. – user1115851

Я не уверен, какой вывод вы хотите отобразить. Попробуйте удалить height из вашего класса .hp-wgt-row, потому что это делает его перекрытием. Только сосредоточьтесь на width, если вы хотите, чтобы он реагировал на другие размеры экрана.

Update:

Я вернулся высоту от .hp_wgt_row и добавил overflow-y: scroll. Затем я удалил высоту на .hp_wgt_col вместо того, чтобы сделать ее не перекрывающей.

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#footer-content { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    /* top: 2px; */ 
 
    /* left: 2px; 
 
    right: 2px; */ 
 
    text-align: right; 
 
    font: bold; 
 
} 
 

 
.hp_wgt_row { 
 
    min-width: 33.33%; 
 
    min-height: 33.33%; 
 
    height: 33.33%; 
 
    /* border: 2px black solid; */ 
 
    position: relative; 
 
    overflow-y: scroll; 
 
} 
 

 
.hp_wgt_col { 
 
    min-width: 33.33%; 
 
    min-height: 33.33%; 
 
    /* height: 33.33%; */ 
 
    padding: 2px; 
 
    position: relative; 
 
} 
 

 
.hp_wgt_header { 
 
    background-image: linear-gradient(45deg, blue, red); 
 
    color: #fff; 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    height: 23px; 
 
    padding: 2px 12px; 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 

 
.hp_wgt_content_wrapper { 
 
    /* position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    overflow: hidden; */ 
 
    min-height: 200px; 
 
} 
 

 
.hp_wgt_content { 
 
    width: 90%; 
 
    margin: 3px auto; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
.hp_wgt_circular_ul { 
 
    /* height: 90%; */ 
 

 
} 
 

 
.hp_wgt_circular_ul li { 
 
    color: black; 
 
} 
 

 
.hp_wgt_circular_ul li:nth-child(odd) { 
 
    background-color: #e5e5e5; 
 
} 
 
/* .hp_wgt_circular_ul li:nth-child(even) { 
 
    background-color: blue; 
 
} */

<div style="height: 100%;"> 
 
     <div class="container-fluid" style="height: 95%;">   
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Circular</div> 
 
        <div class="hp_wgt_content_wrapper"> 
 
         <div class="hp_wgt_content"> 
 
          <ul class="list-group hp_wgt_circular_ul"> 
 
           <li class="list-group-item">Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1</li> 
 
           <li class="list-group-item">Circular 2 Circular 2 Circular 2 Circular 2 Circular 2 Circular 2</li> 
 
           <li class="list-group-item">Circular 3</li> 
 
           <li class="list-group-item">Circular 4</li> 
 
           <li class="list-group-item">Circular 5</li> 
 
           <li class="list-group-item">Circular 6</li> 
 
          </ul> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Logo</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Login</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Phone Database</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Photo Gallery</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">News</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
      <div class="row hp_wgt_row"> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Links</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Events</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
       <div class="col-md-4 hp_wgt_col"> 
 
        <div class="hp_wgt_header">Others</div> 
 
        <div class="hp_wgt_content">Circular</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div>

источник

2016-10-19 09:41:24

Если я удаляю высоту и добавляю больше элементов .hp_wgt_content, строка принимает высоту hp_wgt_content. Мне нужно, чтобы все три строки имели равные высоты. – user1115851

В каком классе вы снимаете высоту? Можете ли вы предоставить обновленную jsFiddle для вашей работы? –

Я удалил высоту с .hp_wgt_row – user1115851

Если удалить высоту встроенного стиля: 100% сверху наиболее сОн и сделать это "авто". он исправит проблему

источник

2016-10-19 10:19:08 user3205881

содержания DIV протекающей в другую DIV

ответ

Смежные вопросы