Question

我试图翻新我的整个网站但无法设法修复容器内的溢出。我试图让网站结构尽可能简单，但我找不到问题：

<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

更新我在代码中添加了以下内容：

.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

Answer 1

这里有一些事情会影响你的map-container div的溢出属性。最明显也是最重要的事情是确保您的map-container维度属性引用父属性或已定义属性。

map-container的高度定义为：

height: 100%;

..当向上移动父级层次结构时，其CSS类如下：

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

> "row"

> "main-content"

> "page-content"

> "page-content-wrapper"

> "page-container"

> "page-header-fixed"

..我们可以看到，提供任何可能的参考高度属性的唯一类是：row，page-content和page-content-wrapper。所有这些都具有以下属性：height: 100%;

这不起作用，因为继承链中有多个中断。不幸的是，在属性为height: 100%;（默认值）的div中，属性为height: auto;的div将不会像您想象的那样运行。继承链中的每个元素都必须具有声明高度属性才能使其生效。如果添加：

，它应该可以工作

.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*/
}

现在的另一个问题源于您在map-container的继承链中使用Bootstrap列类的事实。所有Bootstrap列类都应用以下属性：float: left; position: relative; min-height: 1px;。问题是float: left;属性。浮动一个元素会从DOM中删除该元素，并在每个＆＃34;非浮动的＆＃34;之后添加该元素。元素已被加载。＆＃34;这打破了继承链。每个父项都需要浮动（我们看到导致地图因某种原因消失）或者您需要删除Bootstrap列类（我建议您这样做）。 从col-md-8的父容器中移除课程map-container并添加：

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

Div容器导致溢出

1 个答案: