Question

我有一个带有顶部导航栏和底部导航栏的小部件布局框架。在那个小部件里面我有项目，其中一个我必须放置另一个布局（与父级相同）。 This is small example of mine css problem，子布局中的页脚不在底部。

.body{
    position: static;
    width: 100%;
    height: 100%;
}
.header{
    position: absolute;
    top: 0px;
}
.footer{
    position: absolute;
    bottom: 0px;
}
.main{
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.item{
    position: relative;
    width: 100%;
}
.view{
    height: 100%;
}

这不会在父窗口小部件中获得高度，我该如何解决？

Answer 1

我设法在没有任何位置的情况下构建我想要的布局，我删除了所有这些。我用：

display: table;
display: table-row;

用于矿井布局，效果很好。 Here is the example of what i did。以下是我所做的一般性CSS。

.body{
    height: 100%;
    display: table;
    width: 100%;
    text-align: center;
}
.header{
    display: table-row;
    width: 100%;
    height: 50px;
    background-color: blue;
}
.footer{
    display: table-row;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: grey;
}
.main{
    display: table;
    width: 100%;
    height: 100%;
}
.item{
    display: table-row;
    width: 100%;
}
.fullExtend{
    height: 100%;
}
html, body { height: 100%; }

类主体是小部件的容器，页眉和页脚是每个小部件的页眉和页脚，主要是小部件的主体，项目是主要的一部分，可以是小部件，而fullExtend是高度获得最大空间的项目

Answer 2

你想要达到这样的目标吗？

编辑：我稍微改进了你的结构。你想实现这个目标吗？

HTML：

<div class="main-header">
    Main Header
</div>

<div class="wrapper">

    <div class="item item-1">

            <div class="header">
                Item 1 Header
            </div>

            <div class="item-content">
                <div class="item item-2">
                    Item 2
                </div>
            </div>
            <div class="footer">
                Item 1 Footer
            </div>
    </div>
</div>
<div class="main-footer">
    Main Footer
</div>

CSS：

html{
  height: 100%;
}

body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.main-header{
    position: absolute;
    top: 0px;
    background-color: blue;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: white;
    text-align: center;
}

.main-footer{
    position: absolute;
    bottom: 0px;
    background-color: grey;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: white;
    text-align: center;
}
.wrapper{
  position: relative;
  padding: 50px 0;
  box-sizing: border-box;
  height: 100%;
}
.header{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 50px;
    background-color: darkblue; 
  color: white;
}
.footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: darkgrey;
  color: white;
}
.item{
    position: relative;
    width: 100%;
    height: 100%;
}
.item-view{
  height: 100%;
  position: absolute;
  width: 100%;
  padding-top: 50px;
  box-sizing: border-box;
}
.item-content{
  position: relative;
  top: 50px;
}

布局内的CSS布局

2 个答案: