Контейнер Div вызывает переполнение

Я попытался обновить весь сайт, но не могу исправить переполнение внутри контейнера. Я попытался сделать структуру сайта как можно более простым, но я не могу найти проблему:Контейнер Div вызывает переполнение

https://jsfiddle.net/x12bkd9g/

<body class="page-header-fixed"> 
    <div class="page-header navbar navbar-fixed-top"></div> 
    <div class="clearfix"></div> 
    <div class="page-sidebar-wrapper"> 
     <div class="page-sidebar"> 
      test 
     </div> 
    </div> 
    <div class="page-container"> 
     <div class="page-content-wrapper"> 
      <div class="page-content"> 
       <div class="top-bar"></div> 
       <div class="main-content"> 
        <div class="row"> 
         <div class="content-container-left col-md-8 class-with-no-padding"> 
          <div class="toolbar"> 
           <div class="portlet-body"> 
            <div class="form-group form-group-default top-bar"> 
             {!! Form::label('location', 'Position') !!} 
             {!! Form::text('location', null, ['class' => 'form-control']) !!} 
            </div> 
           </div> 
          </div> 
          <div class="map-container"> 
           <div id="gis-map-view"></div> 
          </div> 
         </div> 
         <div class="content-container-right col-md-4 class-with-no-padding"> 
          Test 
         </div> 

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

    <script type="text/javascript" src="../js/tailScripts.js"></script> 

</body>

CSS-:

* HEADER */ 
.class-with-no-padding { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
} 

.page-header.navbar { 
    width: 100%; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    height: 60px; 
    min-height: 60px; 
    background-color: red; 
} 

.page-header-fixed .page-container { 
    margin-top: 60px; 
} 
.page-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    margin-left: 60px; 
    background-color: #808080; 
    overflow: hidden; 
} 

.page-sidebar-wrapper { 
    background-color: #0000ff; 
    position: absolute; 
    top: 60px; 
    left: 0; 
    bottom: 0; 
    width: 60px; 
} 

.page-sidebar { 
    background-color: #008000; 
    position: relative; 
    height: 100%; 
} 


.page-content-wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background-color: lightgreen; 
} 

.page-content-wrapper .page-content { 
} 

.page-content { 
    margin-top: 0px; 
    padding: 0px; 
    height: 100%; 
} 

.main-content { 
    background-color: red; 
    width: 100%; 
} 

.main-content, 
.main-content > .row, 
.main-content > .row > div { 
    height: 100%; 
    margin: 0; 
} 

.content-container-left { 
    background-color: lightblue; 
} 

.content-container-right { 
    background-color: yellow; 
} 

.top-bar { 
    background-color: lightgreen; 
    width: 100%; 
    height: 60px; 
} 

.toolbar { 
    background-color: #f7f8f9; 
    height: 80px; 
    padding: 12px; 
} 

.map-container { 
    height: 100%; 
    overflow: auto; 
} 

#gis-map-view { 
    height: 100%; 
    position: relative; 
}

Почему мой внутренний контейнер, содержащий переполнение карты. Я не уверен, где проблема:

enter image description here

Update Я добавил следующее к коду:

.map-container { 
    height: 100%; 
    overflow: auto; 
    float:left; 
    position: relative; 
    min-height: 1px; 
}

Но теперь карта исчезла: enter image description here

Обновление 2 После изменения на

* { 
    float:left; 
    position:relative; 
    min-height: 1px; 
} 

.map-container { 
    float: none !important; 
    height: 100%; 
}

Это случилось: enter image description here

источник

2015-04-27 sesc360

Не могли бы вы дать ссылку на страницу? Без этого, я не вижу ничего, что могло бы описать вашу ошибку CSS. Существует много классов CSS, которые вы используете, которые не показаны в вашем фрагменте. Эти классы похожи на Drupal, которые я теперь предполагаю, что вы используете, но не имея возможности опросить страницу и точно посмотреть, какие стили применяются. – WebWanderer

Можете ли вы добавить этот код в jsfiddle? – Codelord

Я добавлю код в JSFiddle. Один момент, пожалуйста, – sesc360

Есть несколько вещей, происходящих здесь, которые будут влиять на переполнение свойства вашего map-container дел. Самое очевидное и самое главное - убедиться, что ваши свойства измерения map-container ссылаются либо на родительское свойство, либо на определенное свойство. высота

ваших map-container «S определяется как:

height: 100%;

..yet при перемещении вверх по родительской иерархии, чьи CSS классы следуют:

> "content-container-left col-md-8 class-with-no-padding" 

> "row" 

> "main-content" 

> "page-content" 

> "page-content-wrapper" 

> "page-container" 

> "page-header-fixed"

.we может видеть, что только классы, предлагающие любое возможное свойство ссылочной высоты: row, page-content и page-content-wrapper. Все они имеют свойство: height: 100%;

Это не будет работать, потому что в цепочке наследования есть несколько разрывов. К сожалению, div с свойством: height: 100%; внутри div с свойством: height: auto; (по умолчанию) не будет вести себя так, как вы думаете. Каждый элемент в цепочке наследования должен иметь свойство высоты объявления для этого. Он должен работать, если добавить:

.page-header-fixed { 
    height: 100%; /*or any pixel dimension*/ 
} 

.page-container { 
    height: 100%; /*or any pixel dimension*/ 
} 

.main-content { 
    height: 100%; /*or any pixel dimension*/ 
} 

.content-container-left { 
    height: 100%; /*or any pixel dimension*/ 
}

Другой вопрос, в настоящее время связано с тем, что вы используете класс столбца Bootstrap в наследство цепи вашего map-container. Все классы столбцов Bootstrap применяют свойства: float: left; position: relative; min-height: 1px;. Вопрос заключается в собственности float: left;. Плавающий элемент удаляет элемент из DOM и добавляет элемент после того, как каждый «неплавающий» элемент был «загружен». Это нарушает цепочку наследования. Либо каждый родитель должен быть плавающим (что мы видели, потому что по какой-то причине ваша карта исчезла), или вам нужно удалить класс столбца Bootstrap (который я предлагаю вам сделать).Удалить класс col-md-8 из ваших map-container «ы родительского контейнера и добавить:

.content-container-left { 
    width: 66.6666667%; 
}

источник

2015-04-28 13:56:49 WebWanderer

Hi WebWanderer! Я попробую этот подход! Но один вопрос к этому: я думал, что использование класса «class =» - это способ пойти, если я создам сетки. Не следует ли это использовать? Или наоборот: когда лучше всего использовать строку. Есть ли у макета типичный вариант использования? – sesc360

Класс 'row' предназначен для использования при использовании классов столбцов, но я склонен полагать, что его следует использовать либо непосредственно в элементе' ', либо в элементе, который имеет класс 'col-', применяемый к он (то есть, если вы используете 'col-' элементы класса в вашем элементе 'row'). Все это связано с свойством 'float: left;' классов 'col-', которое может вызвать много хаоса при неправильном использовании, и я честно не знаю, почему Bootstrap использовал float. Возможно, чтобы страница была нарушена, если вы не используете классы 'col-' во всем мире? Я не знаю, но читаю поплавки. Они сосут. – WebWanderer

Класс 'row' может использоваться в любом месте, но если вы также используете классы' col-', вы должны попытаться обратить внимание на все ваши поплавки, поскольку они могут вызывать нечетные функции, если они используются неправильно, особенно для элементов, которые вы ожидаете иметь размеры 'auto'. Если вы используете float, используйте его в поплавке. – WebWanderer

Контейнер Div вызывает переполнение

ответ

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